canDeactivate问题：“类型'CanDeactivate'不是通用的”

Question

我正在尝试在Angular 7中建立一个简单的canDeactivate保护，并且我尝试了许多在线教程中的代码，但是它们都产生相同的错误：

“类型'CanDeactivate'不是通用的。”

我究竟做错了什么？除了出现相同问题的另一个2年未解答的问题，我什至在任何Google匹配中都找不到此错误。

在这里查看代码：

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>