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

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

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

在这两种方法中，如果可能的话，我宁愿等待加载视图，并在无法加载资源时取消路线导航。这节省了我“取消导航”的工作。编辑：请注意，这具体意味着这个问题需要 Angular 2 futures 兼容或最佳实践方法来执行此操作，并要求尽可能避免“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());
    }
}

以下问题可能反映同样的问题：加载带有数据的 PROMISE 后的 Angular 2 渲染模板。请注意，该问题中没有代码或接受的答案。

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

Angular 2指的是这个?.语法为埃尔维斯操作员。文档中很难找到它的引用，因此这里是它的副本，以防他们更改/移动它：

Elvis 运算符 (?.) 和 null 属性路径

Angular 的“Elvis”运算符 ( ?. ) 是一种流畅且便捷的方法，可以防止属性路径中出现空值和未定义值。就是这样，如果 currentHero 为空，可以防止视图渲染失败。

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

让我们详细说明这个问题和这个特定的解决方案。

当以下数据绑定标题属性为空时会发生什么？

The title is {{ title }}

视图仍然呈现，但显示的值为空白；我们只看到“标题是”，后面什么也没有。这是合理的行为。至少应用程序不会崩溃。

假设模板表达式涉及属性路径，如下一个示例所示，我们将显示空英雄的名字。

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

JavaScript 抛出空引用错误，Angular 也是如此：

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

更糟糕的是，整个视野都消失了。

如果我们相信英雄属性绝不能为空，我们就可以声称这是合理的行为。如果它永远不能为空，但它却是空，那么我们就犯了一个应该被捕获并修复的编程错误。抛出异常是正确的做法。

另一方面，属性路径中的空值有时可能没问题，特别是当我们知道数据最终会到达时。

当我们等待数据时，视图应该毫无抱怨地呈现，并且 null 属性路径应该像 title 属性一样显示为空白。

不幸的是，当 currentHero 为空时，我们的应用程序崩溃了。

我们可以使用 NgIf 编写代码来解决这个问题

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

或者我们可以尝试使用 && 链接属性路径的各个部分，因为知道表达式在遇到第一个 null 时会退出。

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

这些方法有其优点，但可能很麻烦，尤其是在财产路径很长的情况下。想象一下，在长属性路径（例如 a.b.c.d）中防止出现 null。

Angular 的“Elvis”运算符 ( ?. ) 是一种更流畅、更方便的方法来防止属性路径中出现空值。当表达式遇到第一个空值时，它就会退出。显示为空白，但应用程序继续滚动并且没有错误。

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

它也适用于长属性路径：

a?.b?.c?.d