Angular 5 : *ngIf ="isValid;else other_content" VS *ngIf ="isValid" . *ngIf ="!isValid"

Question

这个问题是关于理解为什么一种技术比另一种更好。在 Angular 4/5 中，在模板中，您可以通过执行以下操作来实现相同的目的:

1) *ngIf-else 语法

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

2) *ngIf="isValid"*ngIf="!isValid"

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

这两个语法是完全有效的，使用语法 1，你可以更进一步像 describe here ，但是是否有使用其中一个与另一个的任何性能/最佳实践建议？

Answer 1

两个 ngIf 指令被编译两次并导致两个绑定(bind)而不是一个。

如果表达式包含管道，这会变得更加困惑:

<div *ngIf="isValidAsync | async">...</div>
<div *ngIf="!(isValidAsync | async)">...</div>

将导致两个订阅。

ngIf else 模板正是为了解决这种情况而受支持的，应作为经验法则使用。