在 Angular 1 中，我的配置如下所示：
$routeProvider
.when("/news", {
templateUrl: "newsView.html",
controller: "newsController",
resolve: {
message: function(messageService){
return messageService.getMessage();
}
}
})
如何在 Angular2 中使用解析？
正如 alexpods 已经提到的那样，似乎没有这样的“解决方案”。这个想法似乎是您利用路由器提供的生命周期钩子。这些都是：
然后是@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 的结果。我对那个解决方案不满意，但这是我能想到的最好的解决方案。
基于@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 } }
];
最后，提供您的解析类和任何对引导程序或主要组件的依赖项providers：
bootstrap(AppComponent, [
HeroesResolver, HeroService
])
使用来自 ActivatedRoute 实例的解析数据：
ngOnInit() {
this.hero = this.route.snapshot.data['hero'];
}
请记住，快照表示组件类和解析器类中执行状态的值。使用这种方法无法从参数更新中刷新数据。
Plunker：http ://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P?p=preview 源资料：https ://github.com/angular/angular/commit/f2f1ec0#diff-a19f4d51bb98289ab777640d9e8e5006R436
https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html “resolve”已被带回 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+ 中创建您的解析器并将其应用到路由器上很容易。看下面，这是在 Angular 中创建解析器的方法：
@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);
}
}
然后在路由器配置中：
export const Routes: RouterConfig = [
{ path: 'about', component: AboutComponent, resolve: { data: AboutResolver } }
];
最后在您的组件中：
ngOnInit() {
this.route.data.subscribe((data: { about: About }) => {
this.about = data.about;
});
}
@AndréWerlang 的回答很好，但是如果您希望页面上的已解析数据在路由参数更改时发生更改，则需要：
解析器：
@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;
});
}