Angular 4 CanActivateChild 不起作用答案

【问题标题】：Angular 4 CanActivateChild doesn't workAngular 4 CanActivateChild 不起作用
【发布时间】：2017-06-07 22:16:59
【问题描述】：

我正在尝试使用CanActivateChild 限制对我的路由系统的访问，但是当我尝试阻止用户导航到一组子状态时，RouteGuard 不起作用，仅在CanActivate 上起作用。这是我的路由模块：

export const routes = [
    { path: "", redirectTo: "/signin", pathMatch: "full" },
    { path: "signin", component: SigninComponent },
    {
        path: "user",
        component: UserComponente,
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            { path: "profile", component: ProfileComponent, },
            { path: "address", component: AddressComponent, },
        ]
    },
    { path: "test", component: TestComponent, canActivate: [AuthGuard] },
];

在这个例子中，如果我尝试访问路由test，我可以看到AuthGuard正在执行，函数canActivate被调用。

但是当我尝试导航到任何子路线（个人资料或地址）时，什么也没有发生。 canActivate 和 canActivateChild 都不会在 AuthGuard 上被调用。

这是我的保护文件：

import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild } from '@angular/router';
import { getString } from 'application-settings';
import { AppConfig } from './../config';

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {
    constructor() { }

    canActivate() {
        console.log('canActivate executing.');

        if (!getString(AppConfig.authToken)) {
            alert('You need to be logged in.');
            return false;
        }
        return true;
    }

    canActivateChild() {
        console.log('canActivateChild executing.');
        return this.canActivate();
    }
}

【问题讨论】：

如果您查看控制台，您是否看到任何错误？ AppConfig 在哪里定义？它被导入然后在这里使用：AppConfig.authToken 但是它没有在任何地方声明或注入？ getString 也一样。
@DeborahK 我只是没有把它放在这里。但一切都被导入和使用得很好。就像我说的，如果我尝试访问测试路线，我可以导航到那里，我确实会看到一条 console.log 消息。此外，没有错误。当我尝试访问地址或个人资料路由时，什么也没有发生。
如果您添加 canActivate 或 canActivateChild 并且不在同一路径上，它是否有效？（他们应该像你一样一起工作......只是想知道单独使用每个人是否有效。）
@DeborahK 不。一旦我在带有子声明的路径中定义它，它就会停止工作。
@DeborahK 我还在调查这个。我试图只更改页面上的纯文本，但没有更新。在我手动重新编译项目（强制整个更新）后，它开始工作。我正在开发一个 NativeScript/TypeScript 项目。我只是不知道问题来自哪里。但我认为它与 canActivate 代码本身无关，而是其中一个部分没有正确更新代码。

标签： angular angular-router-guards

【解决方案1】：

你需要在你的构造函数中注入路由器，你也需要导入它。

import { Router } from '@angular/router'

constructor(
    private router: Router
  ) {}

因为您需要让路由器知道更改。您可以返回 boolean、observable 或 UrlTree，以便路由器可以更新其状态。

【讨论】：