angular - 在渲染 View /模板之前等待 Angular 2 加载/解析模型

Question

在 Angular 1.x 中，UI-Router 是我的主要工具。通过返回“解决”值的 promise ，路由器将在呈现指令之前简单地等待 promise 完成。

或者，在 Angular 1.x 中，空对象不会使模板崩溃——所以如果我不介意暂时不完整的渲染，我可以只使用 $digest 在 promise.then() 填充一个最初为空的模型对象。

在这两种方法中，如果可能的话我宁愿等待加载 View ，如果无法加载资源则取消路由导航。这为我节省了“取消导航”的工作。 编辑:请注意，这具体意味着此问题要求使用 Angular 2 future 兼容或最佳实践方法来执行此操作，并要求尽可能避免使用“猫王运算符”!因此，我没有选择那个答案。

但是，这两种方法在 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());
    }
}

以下问题可能反射(reflect)了相同的问题:Angular 2 render template after the PROMISE with data is loaded .请注意，该问题中没有代码或可接受的答案。

Answer 1

尝试 {{model?.person.name}}这应该等待模型不是 undefined然后渲染。

Angular 2 指的是这个 ?.语法为 Elvis operator .在文档中很难找到对它的引用，所以这里有一份它的副本，以防他们更改/移动它:

The Elvis Operator ( ?. ) and null property paths

The Angular “Elvis” operator ( ?. ) is a fluent and convenient way to guard against null and undefined values in property paths. Here it is, protecting against a view render failure if the currentHero is null.

The current hero's name is {{currentHero?.firstName}}

Let’s elaborate on the problem and this particular solution.

What happens when the following data bound title property is null?

The title is {{ title }}

The view still renders but the displayed value is blank; we see only "The title is" with nothing after it. That is reasonable behavior. At least the app doesn't crash.

Suppose the template expression involves a property path as in this next example where we’re displaying the firstName of a null hero.

The null hero's name is {{nullHero.firstName}}

JavaScript throws a null reference error and so does Angular:

TypeError: Cannot read property 'firstName' of null in [null]

Worse, the entire view disappears.

We could claim that this is reasonable behavior if we believed that the hero property must never be null. If it must never be null and yet it is null, we've made a programming error that should be caught and fixed. Throwing an exception is the right thing to do.

On the other hand, null values in the property path may be OK from time to time, especially when we know the data will arrive eventually.

While we wait for data, the view should render without complaint and the null property path should display as blank just as the title property does.

Unfortunately, our app crashes when the currentHero is null.

We could code around that problem with NgIf

<!--No hero, div not displayed, no error --> <div *ngIf="nullHero">The null hero's name is {{nullHero.firstName}}</div>

Or we could try to chain parts of the property path with &&, knowing that the expression bails out when it encounters the first null.

The null hero's name is {{nullHero && nullHero.firstName}}

These approaches have merit but they can be cumbersome, especially if the property path is long. Imagine guarding against a null somewhere in a long property path such as a.b.c.d.

The Angular “Elvis” operator ( ?. ) is a more fluent and convenient way to guard against nulls in property paths. The expression bails out when it hits the first null value. The display is blank but the app keeps rolling and there are no errors.

<!-- No hero, no problem! --> The null hero's name is {{nullHero?.firstName}}

It works perfectly with long property paths too:

a?.b?.c?.d