Question

我正在尝试在angular2中使用CanActivate防护来要求用户保存更改。我正在使用角度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

我做了一些改变：

将guard实现切换到另一个组件（我在路由配置中定义的组件）：

export class PortfolioNavigationGuard implements CanDeactivate<PortfolioDetailComponent> {

到

export class PortfolioNavigationGuard implements CanDeactivate<PortfolioModelComponent> {

有两点需要注意。第一个组件不通过路由器插座加载，而第二个组件是。我认为属于另一个组件（在模板中用作标签）的组件仍然可以访问路由数据（您可以订阅路由ID更改，让我们说在使用选择器而不是路由器出口的组件中）但是，对于防护装置来说，看起来要放置防护装置的部件必须带有路由器插座。

CanDeactivate guard无法访问其保护的组件的功能

1 个答案: