如何在Angular2中实现CanActivate Guard

Question

我正在尝试在我的服务中实现“ CanActivate”方法，以下是服务代码

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable()
export class GuardUserSearchService implements CanActivate {

    CanActivate() {
        console.log('dummy guard clause for User search');
        return true;
    }
}

当我编译此typeScript代码时，它显示以下错误

类“ GuardUserSearchService”错误地实现了接口“ CanActivate”。

知道我的代码有什么问题。

Answer 1

您的服务必须实现此功能才能完全实现该CanActivate接口：

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean { }

请注意，接口名称为CanActivate （大写C ），而方法名称为canActivate （小写c ）。

Answer 2

根据文档 ，界面如下所示：

interface CanActivate {
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean>|Promise<boolean>|boolean
}

因此，您的实现缺少参数：

export class GuardUserSearchService implements CanActivate {
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        console.log('dummy guard clause for User search');
        return true;
    }
}

Answer 3

只需一项更改-

#both C&A is capital
export class Guard implements CanActivate () {
-code-
}

#here only A is in capital dont follow CammelCase
canActivate(){ 
-code
});