我是初学者,正在按照教程学习 Angular,因为我遵循这些教程,当我实现接口(interface) CanAcivate
时,他在教程中做了它的显示错误
类“AuthGaurd”错误地实现了接口(interface)“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;但是不行
我还在 canActivate 中添加了以下内容,因为我在 StackOverflow 上看到了一个答案,但它对我也不起作用
CanActivate(next: ActivatedRouteSnapshot,
state: ActivatedRouteSnapshot): Observable<boolean>
最佳答案
你的方法应该是 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;
});
}
关于angular - 类 'AuthGaurd' 错误地实现了接口(interface) CanActivate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54900094/