*ngIf 指令中的分号与 else 块 - Angular

Question

最近我在 Angular 中使用了一个带有 else 块的*ngIf指令，并且想知道为什么在Angular 文档中的示例使用分号 ( <div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>) ，因为这似乎也可以在没有分号的情况下工作。

不使用分号有什么副作用吗？或者这只是一种更简洁的编码方式？

Answer 1

深谋远虑

回想起来，这是一个非常有趣的问题。实际问题<div *ngIf="condition; else elseBlock">按预期工作。但也确实<div *ngIf="condition else elseBlock">如此，那又是什么呢？分号究竟需要什么？

解释

事实证明，定义如何扩展到的 Angular微语法规范非常灵活，最初难以掌握。官方的 Angular文档没有深入。一个很好的解释可以在这里和这里找到。解释的要点是微语法定义的形式*ngIf[ngIf]

*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"

• :prefix: HTML 属性键。
• :key: HTML 属性键。
• :local: 模板中使用的局部变量名。
• :export: 指令以给定名称导出的值。
• :experession: 标准角度表达式
• :keyExp = :key ":"? :expression ("as" :local)? ";"?
• :let = "let" :local "=" :export ";"?
• :as = :export "as" :local ";"?

看来分号是可选的。此外，在我们的例子中，else块是一个关键表达式，可以看出冒号是可选的，我们目前没有使用。所以理论上我们也可以使用<div *ngIf="condition else: elseBlock">. 因此，ngFor也可以在没有任何分号的情况下使用。所以下面的块也可以工作

<div *ngFor="let n of arr let i=index let f=first let l=last">
  {{ n }}
</div>

工作示例：Stackblitz