我遇到了一个Angular 17项目，其中通常会产生构建错误的问题，在一个 div 内并且启用了一个 ngIf 时却不会报错。

以下代码片段会产生构建错误（这是我所预期的）：

<div> <div *ngIf="this.simplywrong"> <b>some text</b>

这个代码片段也会产生构建错误：

<div *ngIf="this.simplywrong"> <div *ngIf="something()"> <b>some text</b>

但这个代码片段并不会产生构建错误（这让我很难理解）：

<div *ngIf="true"> <div *ngIf="this.simplywrong"> <b>some text</b>

在这个测试中，该类没有一个 simplywrong 成员，我得到的错误是：

error TS2339: Property 'simplywrong' does not exist on type 'MyTastyComponent'

这是我确实预期看到的。最后一个示例中，当 ngIf 为 true 时，几乎在 ngIf 表达式中的任何情况都会出现：true、false、某个（有效的）属性等等。

我预计这三种情形都会产生构建错误，但在最后一个在 true 上测试的 ngIf 情况却没有错误。我到底是怎么想错了？

解决方案

这似乎是某种Angular的问题。当Angular遇到字面布尔值，如 *ngIf="true" 或 *ngIf="false" 时，编译器的优化阶段会判断该条件是静态且不变的。在代码生成阶段，与在 *ngIf="true" 内嵌视图生成常规类型检查块不同，Angular的类型检查器会把字面量 true 视为一个绝对的类型边界并悄然通过。

如何修复？

1. 第一种办法是更新文件 tsconfig.json：

"angularCompilerOptions": {
  "strictTemplates": true // add this option
}

1. 第二种解决方案是使用现代 Angular控制流

<div>
  @if (a > b) {
    <div>block 1</div>
  } @else if (b > a) {
    <div>block 2</div>
  } @else {
    <div>block 3</div>
  }
</div>