angular - 在 Angular2 路由中使用 Resolve

Question

在 Angular 1 中，我的配置如下所示:

$routeProvider
  .when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
    }
  }
})

如何在Angular2中使用resolve？

Answer 1

基于@angular/router v3-beta，这些是必需的步骤。

实现一个返回 Observable 或普通值的解析器:

@Injectable()
export class HeroResolver implements Resolve {

    constructor(
        private service: HeroService
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero> {
        const id = +route.params['id'];
        return Observable.fromPromise(this.service.getHero(id));
    }

}

请注意，如果您返回一个 observable，解包值(第一个)将通过 route.snapshot.data 可用。如果你想让 Observable 本身可用，那么你需要将它包装在另一个 Observable 中:

return Observable.of(source$);

将解析器添加到您的路由:

export const HeroesRoutes: RouterConfig = [
    { path: 'heroes',  component: HeroListComponent, resolve: { heroes: HeroesResolver } },
    { path: 'hero/:id', component: HeroDetailComponent, resolve: { hero: HeroResolver } }
];

最后，提供您的解析类和任何对 Bootstrap 或您的主要组件 providers 的依赖:

bootstrap(AppComponent, [
    HeroesResolver, HeroService
])

使用来自 ActivatedRoute 实例的解析数据:

ngOnInit() {
    this.hero = this.route.snapshot.data['hero'];
}

请记住，快照是指执行状态下的值，在组件类和解析器类中都是如此。使用此方法无法从参数更新中刷新数据。

笨蛋:http://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P?p=preview来源 Material :https://github.com/angular/angular/commit/f2f1ec0#diff-a19f4d51bb98289ab777640d9e8e5006R436