schreiben CanDeactivate Funktion in der gleichen Komponente

Question

In Winkel 2 RC5 Router 3.0.0 RC1 würde Ich mag die canDeactivate Funktion innerhalb derselben Komponente nennen (oder zumindest der gleichen Datei) der Router prüft Bedeutung:

{ path: 'componentPath', component: MyComponent, canDeactivate: [CanDeactivateGuard] } 

Mit CanDeactivateGuard wird entweder in der gleichen Datei wie MyComponent oder, noch besser, könnte CanDeactivateGuardMyComponent und die canDeactivate() Funktion innerhalb MyComponent sein (aber ich bin nicht sicher, ob es möglich ist)

ich habe die folgende Route versucht :

{ path: 'componentPath', component: MyComponent, canDeactivate: [MyComponent] } 

Und in MyComponent:

import {Component, OnInit} from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 

@Component({ 
    selector: 'my-component', 
    providers: [], 
    templateUrl: 'MyComponent.html', 
    directives: [] 
}) 

export interface CanDeactivateComponent { 
    canDeactivate:() => boolean | Observable<boolean>; 
} 


export class MyComponent implements OnInit, CanDeactivate<CanDeactivateComponent> { 

    onInit(){ 
     // MyComponent initialization 
    } 

    canDeactivate(component: CanDeactivateComponent): Observable<boolean> | boolean { 
     console.log('test'); 
     return true; 
    } 


} 

Aber ich die folgende Fehlermeldung erhalten:

index:2 Error: Error: Can't resolve all parameters for MyComponent: (?, ?) 

Answer 1

Sie CanDeactivate nur umsetzen können von '@ Winkel/Router'

canDeactivate(component: MyComponente, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    return true; 
} 

ich mache Ich glaube nicht, dass Sie das canDeactivate in der Router-Konfiguration brauchen, wenn Sie so vorgehen.

wichtig edit: das RC5 ist, ich weiß nicht, ob es funktioniert auch in RC1

Answer 2

Ich weiß, dass es an der Zeit raubende, aber immer noch ein Upgrade auf RC.5 und Routen Wachen verwenden. Ich beschrieb sie in diesem Blog (es RC4): https://yakovfain.com/2016/07/20/angular-2-guarding-routes/

Die RC.5 Version der Codebeispiele aus diesem Blog ist hier: https://github.com/Farata/angular2typescript/tree/master/chapter3/router_samples/app