Angular 2 中的模板语法引入了一个新的指令语法，其中最常用的是 *ngFor 和 *ngIf 等带有星号的指令。这些带有星号的指令实际上是 Angular 2 的模板语法糖，它们可以让我们更加简单地编写模板，并且在底层也提供了一些重要的功能。
具体原理
在 Angular 2 中，带有星号的指令实际上是一个结构型指令，它会将当前组件的宿主元素替换成一个 ng-template 元素。例如，下面是一个使用 *ngIf 指令的示例：
---- ------------------------- -----------
这个 div 元素会被 Angular 2 底层转化为以下的形式：
------------ --------------------- ---------- ----------- --------------
因此，实际上使用 *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 指令的示例代码：
---- --- ----------- ---- -- ------ ----- -- --------- ------------- -----
其中，items 是一个数组类型的变量，用于存储列表中的数据。*ngFor 指令会将当前元素替换为一个 ng-template 元素，并在 ng-template 上使用 ngForOf 属性循环渲染子元素。同时，我们还可以使用 index as i 的形式来获取当前元素在数组中的索引值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27396