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'];
}

原文地址：https://www.jb51.cc/angularjs/146184.html