Основываясь на @angular/router v3-beta, это необходимые шаги.
Реализуйте преобразователь, который возвращает наблюдаемое или простое значение:
@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:
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'];
}
Помните, что моментальный снимок означает значение в состоянии выполнения как в классе компонента, так и в классе преобразователя. При таком подходе данные не могут быть обновлены из обновлений параметров.
Планкер: http://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P?p=preview Исходный материал: https://github.com/angular/angular/commit/f2f1ec0#diff-a19f4d51bb98289ab777640d9e8e5006R436
person
André Werlang
schedule
11.07.2016
@CanActivate
и@OnActivate
хуки (но это, конечно, неresolve
функциональность). - person alexpods   schedule 01.11.2015