angular2 – 等待Angular 2在渲染视图/模板之前加载/解析模型

前端之家收集整理的这篇文章主要介绍了angular2 – 等待Angular 2在渲染视图/模板之前加载/解析模型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在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'];
}

猜你在找的Angularjs相关文章