在Angular1.x中,UI-Router是我的主要工具。通过返回对“resolve”值的承诺,路由器将仅仅等待promise在渲染指令之前完成。
或者,在Angular1.x中,null对象不会使模板崩溃 – 所以如果我不介意临时不完整的渲染,我可以使用$ digest在promise.then()填充最初的空模型对象。
在两种方法中,如果可能,我宁愿等待加载视图,如果资源无法加载,则取消路由导航。这节省了我的“无导航”的工作。编辑:注意这意味着这个问题要求一个Angular 2期货兼容或最佳实践的方法来做到这一点,并要求避免“Elvis操作符”如果可能!因此,我没有选择这个答案。
然而,这两种方法都不能在Angular 2.0中工作。当然有一个标准的解决方案计划或可用于此。有谁知道它是什么?
@Component() { template: '{{cats.captchans.funniest}}' } export class CatsComponent { public cats: CatsModel; ngOnInit () { this._http.get('/api/v1/cats').subscribe(response => cats = response.json()); } }
以下问题可能反映相同的问题:Angular 2 render template after the PROMISE with data is loaded。请注意,问题中没有代码或接受答案。
新的@ angular / router @ 3.0.0-beta.2有路由的Resolve属性。因此,您可以在呈现路由视图之前解析数据。
参见:https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
截至今天的文档示例:
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 } }]) );
编辑:要在运行时从组件内访问已解析的数据,请使用this.route.snapshot.data [‘whateveryouresolved’] ;.
例如,以下是如何使用ActivatedRoute实例中解析的数据:
ngOnInit() { this.hero = this.route.snapshot.data['team']; }