Question

为什么某些指令需要以*开头？例如，在以下代码片段中，指令matHeaderCellDef以*开头。相反，matColumnDef不会。

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> Tag </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

Answer 1

*是一种语法糖，可以更容易地读取和编写在模板帮助下修改HTML布局的指令。 NgFor，NgIf和NgSwitch都添加和删除包含在标签中的元素子树。

ngFor只能应用于<template>。 *ngFor是可以应用于任何元素的简短形式，<template>元素是在场景后隐式创建的。

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Syntax

<li *ngFor="let item of items; let i = index">...</li>
<li template="ngFor let item of items; let i = index">...</li>
<template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>

Used for all structural Directive

这是什么*？你可以看到没有更多的ng-repeat，现在就是ng。为什么星号？答案就是，它是语法糖。 ngFor只能应用于<template>。 * ngFor是可以应用于任何元素的简短形式，<template>元素是在场景后隐式创建的。 *使得在模板的帮助下更容易读取和编写修改HTML布局的指令。 NgFor，NgIf和NgSwitch都添加和删除包含在<template>标记中的元素子树。

HTML模板元素<template>是一种用于保存客户端内容的机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript进行实例化。将模板视为存储的内容片段，以便随后在文档中使用。

Answer 2

答案在Angular文档和源代码中。

没有星号 - ＆gt;属性指令 https://angular.io/guide/attribute-directives

使用星号 - ＆gt;结构指令 https://angular.io/guide/structural-directives

为什么一些Angular指令需要以*开头？

2 个答案: