angular - 通用类型 'CanDeactivate<T>'需要1个类型参数

在下面的代码中(来自“使用TypeScript进行Angular 2开发”一书的示例):

import {CanDeactivate, Router} from "@angular/router";
import {Injectable} from "@angular/core";

@Injectable()
export class UnsavedChangesGuard implements CanDeactivate{

    constructor(private _router:Router){}

    canDeactivate(){
        return window.confirm("You have unsaved changes. Still want to leave?");

    }
}

当我将鼠标悬停在WebStorm中的CanDeactivate上时，我会看到一条警告:



引用此问题的答案-Generic type 'Observable<T>' requires 1 type argument-以下更改删除了警告:

export class UnsavedChangesGuard implements CanDeactivate<any>{

但是，我想知道如何找出CanDeactivate需要的实际参数。

编辑:看着@ angular/router/src/interfaces.d.ts，我们可以看到以下内容:

/**
 * @whatItDoes Indicates that a class can implement to be a guard deciding if a route can be
 * deactivated.
 *
 * @howToUse
 *
 * ```
 * class UserToken {}
 * class Permissions {
 *   canDeactivate(user: UserToken, id: string): boolean {
 *     return true;
 *   }
 * }
 *
 * @Injectable()
 * class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
 *   constructor(private permissions: Permissions, private currentUser: UserToken) {}
 *
 *   canDeactivate(
 *     component: TeamComponent,
 *     route: ActivatedRouteSnapshot,
 *     state: RouterStateSnapshot
 *   ): Observable<boolean>|Promise<boolean>|boolean {
 *     return this.permissions.canDeactivate(this.currentUser, route.params.id);
 *   }
 * }
 *
 * @NgModule({
 *   imports: [
 *     RouterModule.forRoot([
 *       {
 *         path: 'team/:id',
 *         component: TeamCmp,
 *         canDeactivate: [CanDeactivateTeam]
 *       }
 *     ])
 *   ],
 *   providers: [CanDeactivateTeam, UserToken, Permissions]
 * })
 * class AppModule {}
 * ```
 *
 * You can also provide a function with the same signature instead of the class:
 *
 * ```
 * @NgModule({
 *   imports: [
 *     RouterModule.forRoot([
 *       {
 *         path: 'team/:id',
 *         component: TeamCmp,
 *         canActivate: ['canDeactivateTeam']
 *       }
 *     ])
 *   ],
 *   providers: [
 *     {
 *       provide: 'canDeactivateTeam',
 *       useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
 *     }
 *   ]
 * })
 * class AppModule {}
 * ```
 *
 * @stable
 */
export interface CanDeactivate<T> {
    canDeactivate(component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
}

但是尚不清楚“TeamComponent”是什么。

最佳答案

API文档在页面底部提供了源代码的链接。

CanDeactivate interface使用泛型键入第一个canDeactivate参数(已停用的组件):

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

如this guide所示，以停用的组件实例作为参数调用canDeactivate:

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

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

在component.canDeactivate只是组件类中同名的方法的情况下，不一定必须将其称为canDeactivate甚至不存在。 CanComponentDeactivate只是用户定义的接口(interface)，它为canDeactivate组件方法提供了约定。

这样可以在停用期间与组件进行交互，

关于angular - 通用类型 'CanDeactivate<T>'需要1个类型参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44130580/