canDeactivate 问题："Type 'CanDeactivate' is not generic"

Question

我正在尝试在 Angular 7 中设置一个简单的 canDeactivate 守卫，我尝试了一些在线教程中的代码，但它们都产生了相同的错误：

"Type 'CanDeactivate' is not generic."

我做错了什么？我什至无法在任何 google 匹配中找到此错误，除了另一个具有相同问题的 2 年前未回答的问题。

在此处查看代码：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { CanDeactivate } from '@angular/router/src/utils/preactivation';

export interface CanDeactivateComponent {
    canDeactivate: () => Observable<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {
    canDeactivate(component) {
        return component.canDeactivate ? component.canDeactivate() : true;
    }
}

Answer 1

您的 CanDeactivate 导入错误。您必须像这样从 @angular/router 导入它：

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

这将导出正确的界面以在您的项目中使用。它是一个通用接口，带有您的组件类型的类型参数：

export interface CanDeactivate<T> {
  canDeactivate(
      component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
      nextState?: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean
      |UrlTree;
}

根据您的导入，Angular 存储库中的文件 preactivation.ts 导出了一个同名接口，但其用法似乎是 angular 库的内部使用，并不意味着在它之外使用：

export class CanDeactivate {
  constructor(public component: Object|null, public route: ActivatedRouteSnapshot) {}
}

这个接口不是通用的并且没有类型参数，这就是为什么你在这样使用它时会出错：

CanDeactivate<CanDeactivateComponent>

canDeactivate 问题："Type 'CanDeactivate' is not generic"

Issue with canDeactivate : "Type 'CanDeactivate' is not generic"

angular-routing

angular

angular-router-guards