angular - child 保护 : canActivateChild not working

我试图设置一个像 angular doc 这样的 child 保护装置:

@Injectable()
export class AuthGuardService implements CanActivate, CanActivateChild {

  constructor(private authService: AuthentificationService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }

  checkLogin(url: string): boolean {
    /*****/
    return false;
  }
}

我的routing.module:

import { AuthGuardService } from '../services/auth-guard.service';

const routes = [
    {
        path: '',
        component: MyComponent,
        canActivate: [AuthGuardService],
        children: [{
            path: '',
            canActivateChild: [AuthGuardService],
            children: [
                {
                    path: 'candidature',
                    component: ListCandidatureComponent,
                },
                {
                    path: 'candidature/new',
                    component: NewCandidatureComponent
                }]
        }, {
            path: 'login',
            component: LoginComponent,

        }]
    }
]

我将我的 canActivateChild 保护放在无组件部分，以通过身份验证保护此路由。

但是使用此配置，当我尝试访问“my.site.com/candidature”时，出现此错误:

Unhandled Promise rejection: guard is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: guard is not a function

通常，如果我没有通过身份验证，我需要被重定向到登录页面。
是否有人收到此错误或知道为什么要吃午饭？

谢谢

最佳答案

canActivateChild: [AuthGuardService], 不应在 children 内，而应在父路由中声明。

不确定，当您在 children 中声明 children 时，您还需要在外部 child 中声明 canActivateChild 。但是你可以在有和没有它的情况下进行测试。让我知道它是否有效!

const routes = [
    {
        path: '',
        component: MyComponent,
        canActivate: [AuthGuardService],
        canActivateChild: [AuthGuardService] // it should be placed here!
        children: [{
            path: '',
            // canActivateChild: [AuthGuardService], // needed or not?
            children: [
                {
                    path: 'candidature',
                    component: ListCandidatureComponent,
                },
                {
                    path: 'candidature/new',
                    component: NewCandidatureComponent
                }]
        }, {
            path: 'login',
            component: LoginComponent,

        }]
    }
]

希望这可以帮助!