CanDeactivate防护无法访问它所防护的组件的函数

Question

我正在尝试使用angular2中的CanActivate保护来要求用户保存更改。我使用的是angular RC4

Boot.ts

bootstrap(App, [
...HTTP_PROVIDERS,
StorageService,
PortfolioNavigationGuard,
other...

Routes.ts

export const PortfolioRoutes: RouterConfig = [
{ path: 'portfolios', component: 'PortfolioListComponent' },
{ path: 'portfolios/:id', component: 'PortfolioModelComponent', canDeactivate: [PortfolioNavigationGuard] },
{ path: 'portfolios/:id/:action', component: 'PortfolioModelComponent', canDeactivate: [PortfolioNavigationGuard]  }

守卫

@Injectable()

export class PortfolioNavigationGuard implements CanDeactivate<PortfolioDetailComponent> {

constructor(private router: Router) { }

canDeactivate(component: PortfolioDetailComponent) {

    component.canDeactivate();
    component.anyfunction() --- anyfunction is not a function

    return true;
}

错误

EXCEPTION: Error: Uncaught (in promise): TypeError: component.canDeactivate is not a function

组件

export class PortfolioDetailComponent {
canDeactivate() {
    console.log("WOW");
}

为什么我不能在我的卫士内部调用组件上的任何函数？

Answer 1

我做了一些修改：

将防护实现切换到不同的组件(与我在路由配置中定义的组件相同)：

export class PortfolioNavigationGuard implements CanDeactivate<PortfolioDetailComponent> {

至

export class PortfolioNavigationGuard implements CanDeactivate<PortfolioModelComponent> {

有两件事需要注意。第一个组件不是通过路由器出口加载的，而第二个组件是。我在想，属于另一个的组件(用作模板中的标签)仍然可以访问路由数据(您可以订阅路由id更改，比方说，在使用选择器而不是路由器插座带来的组件中)，但是似乎对于守卫来说，您要保护的组件必须通过路由器插座带来。