在同一组件中编写CanDeactivate函数

Question

在angular 2 RC5 router 3.0.0 RC1中，我希望从路由器正在检查的相同组件(或至少相同文件)中调用canDeactivate函数：

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

如果CanDeactivateGuard与MyComponent在同一个文件中，或者更好的是，CanDeactivateGuard可以是MyComponent，而canDeactivate()函数在MyComponent中(但我不确定这是否可能)

我已经尝试了以下路线：

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

在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;
    }


}

但是我得到了以下错误：

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

Answer 1

你可以从'@angular/router‘实现CanDeactivate

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

如果你这样做，我认为你不需要路由器配置中的canDeactivate。

重要编辑:这是RC5，我不知道它是否也适用于RC1

Answer 2

我知道这很耗时，但还是要升级到RC.5并使用路由守卫。我在这个博客中描述了它们(它使用RC4)：https://yakovfain.com/2016/07/20/angular-2-guarding-routes/

来自该博客的代码样例的RCla.版本在这里：https://github.com/Farata/angular2typescript/tree/master/chapter3/router_samples/app