Angular2: Wie man den gleichen Schutz für mehrere Komponenten hat

Question

In Angular2, ist es möglich, den gleichen Schutz (zum Beispiel CanActivate oder CanDeactivate), die auf mehrere Komponenten angewendet werden können? Hier

ist eine Wache für MyComponent1:

@Injectable() 
export class MyGuard implements CanDeactivate<MyComponent1> { 

    canDeactivate(component: MyComponent1): Promise<boolean> { 
    // my code here 
    } 
} 

Ich möchte genau den gleichen Schutz für MyComponent2, MyComponent3 usw.

Wie kann ich das umsetzen? Ich muss eine neue Schutzklasse nach Komponente deklarieren oder kann ich meine Klasse MyGuard wiederverwenden?

Answer 1

Fügen Sie einfach den gleichen Schutz zu jeder Route hinzu, auf der sie angewendet werden soll.

Alternativ können Sie auch eine komponentenlose übergeordnete Route erstellen, in der Sie den Schutz hinzufügen, und alle untergeordneten Routen werden durch den gleichen Schutz geschützt. Dies funktioniert nur, wenn die Komponenten alle in gleichgeordneten Routen sind.

Angular DI unterstützt keine generischen Typparameter. Als Abhilfe sollte das tun, was Sie (Ereignis aber wahrscheinlich ausführlicher als Sie es wollen) wollen:

routes: [ 
    { path: 'x', component: MyComponent1, canDeactivate: [new Inject('CanDeactivateMyComponent1') }, 
    { path: 'y', component: MyComponent2, canDeactivate: [new Inject('CanDeactivateMyComponent2') }, 

] 


@NgModule({ 
    providers: [ 
    {provide: 'CanDeactivateMyComponent1', useFactory:() => new CanDeactivate<MyComponent1>()}, 
    {provide: 'CanDeactivateMyComponent2', useFactory:() => new CanDeactivate<MyComponent2>()}, 

    ], 
}) 
export class AppModule {} 
    ... 
}) 

Answer 2

Basierend auf Günter Zöchbauer's answer ich eine Lösung.

Schutz:

@Injectable() 
export class MyGuard<T> implements CanDeactivate<T> { 
    // Maybe some DI here, just inject them into useFactory and deps 
    constructor() {} 

    canDeactivate(component: T): Promise<boolean> { 
    // my code here 
    } 
} 

Und bietet nur den Hut:

routes: [ 
    { path: 'x', component: MyComponent1, canDeactivate: ['CanDeactivateMyComponent1'] }, 
    { path: 'y', component: MyComponent2, canDeactivate: ['CanDeactivateMyComponent2'] }, 

] 


@NgModule({ 
    providers: [ 
    {provide: 'CanDeactivateMyComponent1', useFactory:() => new MyGuard<MyComponent1>()}, 
    {provide: 'CanDeactivateMyComponent2', useFactory:() => new MyGuard<MyComponent2>()}, 

    ], 
}) 
export class AppModule {} 
    ... 
}) 

Answer 3

Es ist nur etwa so ausführlich, aber eine Alternative ist die Vererbung zu verwenden, um eine neue spezialisierte Wache zu erstellen.

Meine generic Wache sieht ungefähr so ​​aus:

// this goes on the component itself 
export interface IUnsavedChangesComponent 
{ 
    hasUnsavedChanges(): boolean; 
} 

@Injectable() 
export class SaveFormsGuard<C extends IUnsavedChangesComponent> implements CanDeactivate<C> 
{ 
    constructor() 
    { 
     console.log("SAVEFORMSGUARD"); 
    } 

    canDeactivate(component: C) 
    { 
     var hasUnsavedChanges = component.hasUnsavedChanges(); 

     ... dialog box logic ... 

     return !hasUnsavedChanges; 
    } 
} 

So schaffe ich neue Wachen

export class SaveFormsGuard_OrderEditor extends SaveFormsGuard<OrderEditorComponent> { } 
export class SaveFormsGuard_CustomerEditor extends SaveFormsGuard<CustomerEditorComponent> { } 

Sie müssen noch in der Providerliste setzen sie beide, damit es nicht zu haben entpuppen sei ganz so vereinfacht, wie ich es mir erhofft habe - aber es könnte ein gutes Muster sein, dem du folgen musst, wenn du die Logik deiner Wache auch auf andere Weise erweitern musst.