参数类型 'activatedRoute' 和 'route' 不兼容

Question

我有这样的守卫 details.guard.service.ts

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

import { AuthService } from '/auth-service';

import { AuthorizationRoles } from './constants';
import { Tags } from './tags';

/**
 * This will guard route
 */
@Injectable()
export class DetailsGuardService implements CanActivate {

  constructor(private authService: AuthService) { }

  /**
   * Returns whether or not user can see details
   */
  canActivate(activatedRoute: ActivatedRoute): boolean {
    const type = activatedRoute.params['details'];
    if (Tags.includes(type)) {
      return this.authService.roles.some(role => role === AuthorizationRoles.readDetails);
    }
  }
}

我收到错误

ERROR in details.guard.service.ts(20,3): error TS2416: Property 'canActivate' in type 'DetailsGuardService' is not assignable to the same property in base type 'CanActivate'. Type '(activatedRoute: ActivatedRoute) => boolean' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | UrlTree | Observable | Promise'. Types of parameters 'activatedRoute' and 'route' are incompatible. Property 'snapshot' is missing in type 'ActivatedRouteSnapshot' but required in type 'ActivatedRoute'.

我不知道去哪里找，任何帮助都会很好，谢谢

Answer 1

首先，激活路由需要注入到构造函数中。但是你应该使用 ActivatedRouteSnapshot

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean>

当您应该无法导航时，您也应该 return false。

考虑以下代码：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const type = route.params['details'];
    if (Tags.includes(type)) {
      return this.authService.roles.some(role => role === AuthorizationRoles.readDetails);
    } else
    {
        return false;
    }


  }