Angular路由裡的resolve接口的使用方法

https://angular.io/api/router/Resolve

Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that is invoked when the navigation starts. The router waits for the data to be resolved before the route is finally activated.

在route被activate之前，需要一些額外的資料。這些資料通過Angular route接口提供的resolve方法提供。

看個具體的例子。

路由配置：

const CUSTOM_ROUTES: Routes = [
  { path: "custom/:id", 
    component: RouteDemoComponent,
    data:{ name: 'jerry'},
    canActivate: [CanActivateTeam],
    resolve: {
      hero: HeroResolver
    } 
  }
];      

需要在app.module.ts裡的NgModule區域的providers定義裡聲明HeroResolver：

HeroResolver的具體實作：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class HeroResolver implements Resolve<string> {
  constructor() {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
      console.log('resolve');
    return route.paramMap.get('id') + ' Jerry';
  }
}      

注意運作時的執行時序。

首先是CanActivateTeam的執行：

然後是Resolver的執行：

最後，進入跳轉到的Component的ngOnInit方法：

之前用Resolve填充的資料，此刻在類型為ActivatedRoute裡可以通路到了：