Question

我是初学者，正在学习Angular从教程开始，当我遵循这些教程时，以及当我实现界面 CanAcivate 时，就像他在教程中所显示的那样，

类'AuthGaurd'错误地实现了接口'CanActivate'。类型'AuthGaurd'中缺少属性'canActivate'，但类型'CanActivate'中是必需的。ts（2420）

这是Canactivate的实现

export class AuthGaurd implements CanActivate
{
  constructor(private auth: AuthService, private router: Router) { }
  CanActivate(){
    return this.auth.user$.map(user => {
      if (user) return true;
      this.router.navigate(['/login']);
      return false;
    });
  }
}`

这是导入

 import { Injectable } from '@angular/core';
    import { AuthService } from './auth.service';
    import { CanActivate } from '@angular/router/src/utils/preactivation';
    import { Router } from '@angular/router';
    import 'rxjs/add/operator/map';

我将导入从import { CanActivate } from '@angular/router/src/utils/preactivation';更改为import { CanActivate } from '@angular/router; But not work

当我在StackOverflow上观看一个答案时，我也在canActivate中添加了以下内容，但它对我也不起作用

 CanActivate(next: ActivatedRouteSnapshot,
 state: ActivatedRouteSnapshot): Observable<boolean>

Answer 1

请注意canActivate函数的驼峰式情况，并使用必要的参数来实现该功能。

Answer 2

您的方法应为 canActivate（），并且应返回Observable<boolean> | boolean：

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

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
      this.auth.user$.map(user => {
          if (user) return true;
      this.router.navigate(['/login']);
      return false;
    });
    }

Answer 3

您应该从canActivate方法返回一个布尔值。您的方法中存在拼写错误。它应该是canActivate而不是CanActivate。 CanActivate是接口名称，其中canActivate是方法名称

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot,
     RouterStateSnapshot, Router, CanActivateChild } from '@angular/router';

export class AuthGaurd implements CanActivate
{
  constructor(private auth: AuthService, private router: Router) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){

    this.auth.user$.map(user => {
      if (user) return true ;
      this.router.navigate(['/login']);
      return false;
    });


  }
}

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

3 个答案: