Angular 5：* ngIf =“isValid; else other_content”VS * ngIf =“isValid”。 * ngIf =！ “的isValid”

Question

这个问题是关于理解为什么一种技术比另一种技术更好。在角度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，你可以更进一步，比如描述here，但是有没有使用其中一种与另一种相比的性能/最佳实践建议？

Answer 1

两个<button class="button red">Click Me!</button>指令被编译两次，导致两个绑定而不是一个。

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

ngIf

将导致两个订阅。

完全支持

<div *ngIf="isValidAsync | async">...</div> <div *ngIf="!(isValidAsync | async)">...</div> 其他模板来解决这种情况，应该用作经验法则​​。