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里可以访问到了：

更多Jerry的原创文章，尽在：“汪子熙”: