Angular 6 - 无法读取 null 的属性“出口”答案

【问题标题】：Angular 6 - Cannot read property 'outlets' of nullAngular 6 - 无法读取 null 的属性“出口”
【发布时间】：2019-11-04 12:15:41
【问题描述】：

我正在研究 angular 6，当我在没有任何条件的情况下添加路由器链接 (*ngIf) 时，路由器链接会抛出“Cannot read property 'outlets' of null”但是当我在特定部分中添加条件时它不会抛出任何错误链接。

例子：

<section>
<a [routerLink]="['/user',x?.username]"> {{x?.username}} </a>
</section>

上面的代码抛出一个错误。（无法读取 null 的属性“出口”）但是

<section *ngIf="x?.username != null">
<a [routerLink]="['/user',x?.username]"> {{x?.username}} </a>
</section>

这个不会抛出任何错误。

有人可以指导我吗？

提前致谢。

【问题讨论】：

【解决方案1】：

routerLink 时可能会抛出此错误，例如路由包含 null 值。

【讨论】：

【解决方案2】：

无法读取 null 的属性“outlets”

错误信息非常清楚。 x?.username 可能来自异步调用，因此您必须等待它被设置然后在视图中处理。这就是您对条件*ngIf="x?.username != null" 所做的事情。在这里，您正在等待用户名定义或设置以显示链接

【讨论】：