Question

  <div *ngIf="((one===one)&& (two===two)) || (one===two)"></div>

Angular如何评估这个相当复杂的表达式？

当然它没有使用eval，那么它如何解析和评估呢？

有人能指出我正确的方向吗？

我正在查看ngIf的源代码，但似乎没有找到任何有趣的内容。

似乎在ngIf收到价值的时候，它已经被角度评估了。

Answer 1

编译Angular组件时，会为所有绑定以及需要在模板中应用的所有组件，指令和管道生成TypeScript（以及后续步骤中的JavaScript）。然后，这个JavaScript就由浏览器执行。

这是与AngularJS的主要区别之一，其中带有Angular绑定构造的HTML被添加到浏览器加载的HTML中，然后Angular解析DOM并应用其逻辑。

在Angular 2及更高版本中，HTML仅在编译组件模板后添加到DOM 。如果您检查浏览器devtools中的HTML，则缺少特定于角度的绑定（如果它们包含一些非Angular DOM语义，则替换它们）

使用静态模块，当开发人员编译Angular应用程序时（部署之前）会发生这种情况。使用动态模块组件，编译也可以在运行时进行。但它仍然是一样的。模板只添加到DOM 之后 Angular为它们生成JS代码并替换/删除Angular特定的绑定语法..

Answer 2

第一：

*ngIf指令基本上是“环绕<ng-template [ngIf]>”

的快捷方式

 <div *ngIf="expr"></div>


 <ng-template [ngIf]="expr">
   <div></div>
 </ng-template>

所以基本上它归结为与Input bindings相同的评估。您可以在此处搜索信息：

请注意，当Angular运行更改检测时，它将检查是否有任何变量已更改，如果是，则重新评估组件是否要显示/实例化。