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，您可以像描述 那样更进一步，但是是否有关于使用其中一种与另一种的性能/最佳实践建议？

Answer 1

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

如果表达式包含管道，这会变得更加混乱：

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

将产生两个订阅。

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