如何在Angular2中实现CanActivate Guard

Question

I am trying to implement "CanActivate" method in my service, and below is the service code

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;
    }
}

When I compile this typeScript code , it is displays following error

Class 'GuardUserSearchService' incorrectly implements interface 'CanActivate'.

Any idea what is the issue in my code.

Answer 1

Your Service must implement this function to fully implement that CanActivate interface:

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

Note that the interface name is CanActivate (with uppercase C ) while method's name is canActivate (lowercase c ).

Answer 2

As per the documentation , the interface looks like this:

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

So, your implementation is missing the arguments:

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

Answer 3

just one change required-

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

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