鉴于渲染/模板之前等待角2负载/解析模型 [英] Wait for Angular 2 to load/resolve model before rendering view/template
问题描述
在角1.x中，UI的路由器是我这一主要工具。通过返回的决心的价值观的承诺，路由器只会等待承诺渲染指令前完成。
In Angular 1.x, UI-Router was my primary tool for this. By returning a promise for "resolve" values, the router would simply wait for the promise to complete before rendering directives.
另外，在角1.x中，一个空对象不会崩溃模板 - 所以，如果我不介意暂时不完整的呈现，我就可以用 $消化在 promise.then（）填充最初为空的模型对象呈现。
Alternately, in Angular 1.x, a null object will not crash a template - so if I don't mind a temporarily incomplete render, I can just use $digest to render after the promise.then() populates an initially empty model object.
这两种方法，如果可能的话我倒是preFER等待加载视图，并取消路线导航，如果资源无法加载。这样可以节省我的非导航的工作。的编辑：请注意，这具体是指这个问题，请求一个角2期货兼容或最佳实践的方法来做到这一点，并要求避免Elvis操作符如果可能的话！因此，我没有选择的答案。的
Of the two approaches, if possible I'd prefer to wait to load the view, and cancel route navigation if the resource cannot be loaded. This saves me the work of "un-navigating". Note this specifically means this question requests an Angular 2 futures-compatible or best-practice method to do this, and asks to avoid the "Elvis operator" if possible! Thus, I did not select that answer.
然而，无论是这两种方法在角2.0。当然，还有一个标准溶液或计划用于此。有谁知道这是什么吗？
However, neither of these two methods work in Angular 2.0. Surely there is a standard solution planned or available for this. Does anyone know what it is?
@Component() {
template: '{{cats.captchans.funniest}}'
}
export class CatsComponent {
public cats: CatsModel;
ngOnInit () {
this._http.get('/api/v1/cats').subscribe(response => cats = response.json());
}
}
下面的问题可能反映了同样的问题：<一href=\"http://stackoverflow.com/questions/33136954/angular-2-render-template-after-the-promise-with-data-is-loaded?rq=1\">Angular 2数据的承诺载入后呈现模板。注意这个问题中有没有code或接受的答案。
The following question may reflect the same issue: Angular 2 render template after the PROMISE with data is loaded . Note that question has no code or accepted answer in it.
推荐答案
该Angular2期货正确实施这一方法是通过 CanActivate 组件装饰，每布兰登·罗伯茨。看到 https://github.com/angular/angular/issues/6611
The Angular2-futures correct way to implement this is via the CanActivate Component decorator, per Brandon Roberts. see https://github.com/angular/angular/issues/6611
虽然公测0不支持提供解决值组件，它的计划，而且还有这里介绍一种解决方法：的使用解决Angular2路线
Although beta 0 doesn't support providing resolved values to the Component, it's planned, and there is also a workaround described here: Using Resolve In Angular2 Routes
一个Beta 1的例子可以在这里找到： http://run.plnkr.co/BAqA98lphi4rQZAd /＃/解决。它采用了非常相似的解决办法，但稍微更准确地使用的RouteData 对象，而不是 RouteParams 。
A beta 1 example can be found here: http://run.plnkr.co/BAqA98lphi4rQZAd/#/resolved . It uses a very similar workaround, but slightly more accurately uses the RouteData object rather than RouteParams.
@CanActivate((to) => {
return new Promise((resolve) => {
to.routeData.data.user = { name: 'John' }
另外请注意，还有一个例子的解决方法访问解决的价值观以及嵌套/父路由，以及其他功能，你期望，如果你已经使用1.x的UI的路由器。
Also, note that there is also an example workaround for accessing nested/parent route "resolved" values as well, and other features you expect if you've used 1.x UI-Router.
请注意，你还需要手动注入你需要做到这一点的任何服务，因为角注射的层次结构是不是目前在CanActivate装饰用。只需从引导导入注射器将创建一个新的注射器例如，如果没有访问提供商（），所以你可能会想存储自举的应用范围副本注射器。布兰登的此页上第二普拉克链接是一个很好的起点： https://github.com/angular/角/问题/ 4112
Note you'll also need to manually inject any services you need to accomplish this, since the Angular Injector hierarchy is not currently available in the CanActivate decorator. Simply importing an Injector will create a new injector instance, without access to the providers from bootstrap(), so you'll probably want to store an application-wide copy of the bootstrapped injector. Brandon's second Plunk link on this page is a good starting point: https://github.com/angular/angular/issues/4112
这篇关于鉴于渲染/模板之前等待角2负载/解析模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
