在Angular2路线中使用parsing
在Angular 1中，我的configuration如下所示：
$routeProvider .when("/news", { templateUrl: "newsView.html", controller: "newsController", resolve: { message: function(messageService){ return messageService.getMessage(); } } }) 如何在Angular2中使用parsing？
@AndréWerlang的答案是好的，但是如果你希望在路由参数改变的时候页面上parsing的数据发生变化 ，你需要：
parsing器：
@Injectable() export class MessageResolver implements Resolve<Message> { constructor(private messageService: MessageService, private router: Router) {} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Message> { const id = +route.params['id']; return this.messageService.getById(id); } }
你的组件：
ngOnInit() { this.route.data.subscribe((data: { message: Message }) => { this.message = data.message; }); }
基于@ angular / router v3-beta，这些是必需的步骤。
实现一个返回一个Observable或一个普通值的parsing器：
@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)); } }
请注意，如果您返回可观察值，则解包值（第一个值）将通过route.snapshot.data 。 如果您希望observable本身可用，那么您需要将其包装在另一个Observable中：
return Observable.of(source$);
将parsing器添加到路线中：
export const HeroesRoutes: RouterConfig = [ { path: 'heroes', component: HeroListComponent, resolve: { heroes: HeroesResolver } }, { path: 'hero/:id', component: HeroDetailComponent, resolve: { hero: HeroResolver } } ];
最后，提供您的解决scheme类和任何依赖关系引导或您的主要组件providers ：
bootstrap(AppComponent, [ HeroesResolver, HeroService ])
从ActivatedRoute实例中获取已parsing的数据：
ngOnInit() { this.hero = this.route.snapshot.data['hero']; }
请记住，快照意味着处于执行状态的值，无论是在组件类还是parsing器类中。 用这种方法不能从参数更新中刷新数据。
Plunker： http ://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P? p = preview源材料： https ： //github.com/angular/angular/commit/f2f1ec0#diff-a19f4d51bb98289ab777640d9e8e5006R436
正如alexpods已经提到的那样，似乎没有像这样的“决心”。 这个想法似乎是你使用路由器提供的生命周期挂钩。 这些是：
- canReuse
- canDeactivate
- onActivate
- onReuse
- onDeactivate
然后是@CanActivate 。 这是一个特殊的钩子，因为它在组件实例化之前被调用。 它的参数是(next, previous) ，它们是你路由到的组件和你来自的组件（如果你没有历史的话，它们是null）。
import {Component} from '@angular/core'; import {ROUTER_DIRECTIVES, CanActivate, OnActivate} from '@angular/router'; @Component({ selector: 'news', templateUrl: 'newsView.html', directives: [ROUTER_DIRECTIVES] }) @CanActivate((next) => { return messageService.getMessage() .then((message) => { next.params.message = message; return true; //truthy lets route continue, false stops routing }); }) export class Accounts implements OnActivate { accounts:Object; onActivate(next) { this.message = next.params.message; } }
我还没有想出的是如何将承诺的结果放入onActivate中，而不是将其存储在“下一个”组件中。 这是因为onActivate也只能用next和previous调用，而不是promise的结果。 我对这个解决scheme并不满意，但这是我能想到的最好的。
https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html “解决”已被带回到angular2路由器，但文档是稀疏的。
例：
class TeamResolver implements Resolve { constructor(private backend: Backend) {} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> { return this.backend.fetchTeam(this.route.params.id); } } bootstrap(AppComponent, [ TeamResolver, provideRouter([{ path: 'team/:id', component: TeamCmp, resolve: { team: TeamResolver } }]) );
你可以在Angular2 +中创build你的Resolver，并且很容易的将它应用到路由器上。 看下面，这里是在Angular中创buildResolver的方法：
@Injectable() export class AboutResolver implements Resolve<Message> { constructor(private aboutService: AboutService, private router: Router) {} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> { const id = route.params['id']; return this.aboutService.getById(id); } }
那么在路由器configuration中：
export const Routes: RouterConfig = [ { path: 'about', component: AboutComponent, resolve: { data: AboutResolver } } ];
最后在你的组件中：
ngOnInit() { this.route.data.subscribe((data: { about: About }) => { this.about = data.about; }); }
