Question

我在CanActivate上遇到问题

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

import { CanActivate } from '@angular/router/src/utils/preactivation';

import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

import { Observable } from 'rxjs';

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

@Injectable()

export class AuthGuard implements CanActivate {

    constructor(private authService: AuthService,
                private router: Router)
    {

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

        if (this.authService.isAuth) {
            return true;
        }else{
            this.router.navigate(['/auth']);
        }
    }
}

这告诉我：

  src / app / services / auth-guard.service.ts（10,14）中的
ERROR：错误TS2720：   类“ AuthGuard”错误地实现了类“ CanActivate”。你是否   意味着扩展“可以激活”并继承其成员作为子类？
  类型“ AuthGuard”缺少类型中的以下属性   'CanActivate'：路径，路线

但是我不明白为什么？

非常感谢大家！

Answer 1

您从错误的位置导入了CanActivate界面。应该是

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

在return false语句中else也是一个好主意。

Answer 2

在我的情况下，我提供的地方是一个粗心的错误

        canActivate: AuthGuard,

代替

        canActivate: [AuthGuard],

注意方括号

Answer 3

可能您已启用strict。您的函数指定了返回类型：Observable<boolean> | Promise<boolean> | boolean，但是您没有从else分支返回任何内容。也就是说，您的返回类型为true | undefined或boolean | undefined。您必须从else分支返回一些东西：

import { Observable, EMPTY } from 'rxjs'
// and so on
    canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot )
    : Observable<boolean> | Promise<boolean> |boolean {

        if (this.authService.isAuth) {
            return true;
        }else{
            this.router.navigate(['/auth']);
            return EMPTY;
        }
    }

CanActivate问题TS2720

3 个答案: