canDeactivate 问题：“类型‘CanDeactivate’不是通用的”答案

【问题标题】：Issue with canDeactivate : "Type 'CanDeactivate' is not generic"canDeactivate 问题：“类型‘CanDeactivate’不是通用的”
【发布时间】：2019-07-10 21:01:12
【问题描述】：

我正在尝试在 Angular 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;
    }
}

【问题讨论】：

欢迎来到 SO。为什么要从 @angular/router/sr/utils 导入 CanDeactivate？
不是 Angular 专家。如果您说明您使用的版本会有所帮助。但是，您的问题引起了我的兴趣，因为我喜欢学习新框架。我确实找到了一个与您的代码相似但有不同之处的博客。看这里：scotch.io/courses/routing-angular-2-applications/candeactivate

标签： angular angular-routing angular-router-guards

【解决方案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>

【讨论】：