Angular 2 中为什么要使用星号（*）？

Angular 2 中的模板语法引入了一个新的指令语法，其中最常用的是 *ngFor 和 *ngIf 等带有星号的指令。这些带有星号的指令实际上是 Angular 2 的模板语法糖，它们可以让我们更加简单地编写模板，并且在底层也提供了一些重要的功能。

具体原理

在 Angular 2 中，带有星号的指令实际上是一个结构型指令，它会将当前组件的宿主元素替换成一个 ng-template 元素。例如，下面是一个使用 *ngIf 指令的示例：

<div *ngIf="showMessage">Hello World</div>

这个 div 元素会被 Angular 2 底层转化为以下的形式：

<ng-template [ngIf]="showMessage">
  <div>Hello World</div>
</ng-template>

因此，实际上使用 *ngIf 指令并不是直接将 div 元素隐藏或显示，而是将整个 div 元素替换成一个 ng-template 元素，并在 ng-template 元素上添加 [ngIf] 属性。当条件满足时，Angular 2 将会将 ng-template 解开并渲染出来，从而达到了隐藏或显示 div 元素的效果。

类似的，*ngFor 指令也是一个结构型指令，它会将当前组件的宿主元素替换成一个 ng-template 元素，并在 ng-template 上使用 ngForOf 属性来循环渲染子元素。

学习和指导意义

了解带有星号的指令的原理有助于我们更好地理解 Angular 2 的模板语法糖，并且可以帮助我们正确地使用这些指令。同时，星号指令也给我们提供了一些非常方便的工具，例如 *ngIf 和 *ngFor 可以让我们更加简单地编写模板，减少重复代码的编写。

然而需要注意的是，由于这些指令实际上是将宿主元素替换为 ng-template 元素，因此在使用时需要遵守一定的规范。比如，不能在一个元素上同时使用多个带有星号的指令，否则会导致只有最后一个指令生效的问题。

示例代码

下面是一个使用 *ngFor 指令的示例代码：

<ul>
  <li *ngFor="let item of items; index as i">{{i}}: {{item}}</li>
</ul>

其中，items 是一个数组类型的变量，用于存储列表中的数据。*ngFor 指令会将当前元素替换为一个 ng-template 元素，并在 ng-template 上使用 ngForOf 属性循环渲染子元素。同时，我们还可以使用 index as i 的形式来获取当前元素在数组中的索引值。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27396