ジェネリック型「CanDeactivate <T>は」1型引数（s）は、以下のコードでは

Question

（「活字体で角度2開発」の本からの例）が必要ですWebStormでCanDeactivate：

：この質問への回答を参照し

- - Generic type 'Observable<T>' requires 1 type argumentには、以下の変更が警告を削除します

export class UnsavedChangesGuard implements CanDeactivate<any>{ 

しかし、CanDeactivateには実際にどのような引数が必要なのかを知りたいのですが、です。

編集：角度/ルーター/ 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" は何であるかは明らかではありません。

Answer 1

APIドキュメントでは、ページの下部にあるソースコードへのリンクを提供しています。引数として不活性化コンポーネントインスタンスと呼ばれるcanDeactivate、this guideに示すよう

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

：

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 interface最初canDeactivate引数（非活性化成分）を入力するためにジェネリックを使用しコンポーネントクラスの同じ名前の単なるメソッドですが、必ずしもcanDeactivateと呼ばれる必要はありません。 CanComponentDeactivateは、canDeactivateコンポーネントメソッドの規則を提供するユーザー定義のインターフェイスです。

これは

、非活性化中にコンポーネントと対話することを可能にするcanDeactivate（）メソッドを使用すると、いくつかの外部情報にアクセスするために必要な場合には成分、現在ActivatedRoute、及びRouterStateSnapshotの現在のインスタンスを提供します。これは、このコンポーネントに対してこのガードを使用したいだけで、コンポーネントのプロパティを取得したり、ルータがそこからのナビゲーションを許可する必要があるかどうかを確認する必要がある場合に便利です。