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

Question

我正在尝试在角7中设置一个简单的canDeactivate保护程序，我已经尝试了许多在线教程中的代码，但是它们都产生了相同的错误：

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

我做错了什么？我甚至在任何谷歌点击上都找不到这个错误，除了另一个有同样问题的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;
}

根据您的导入，角存储库中的文件preactivation.ts导出一个名称相同的接口，但它的用法似乎是角库的内部，而不是用于外部：

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

此接口不是泛型的，也没有类型参数，这就是为什么您在使用它时遇到如下错误的原因：

CanDeactivate<CanDeactivateComponent>