Question

在angular 2文档* and template中，我们知道* ngIf，* ngSwitch，* ngFor可以扩展为模板标记。我的问题是：

我认为ngIf或ngFor没有*也可以通过角度引擎翻译并扩展为模板标记。那么为什么要在角度2中设计一个奇怪的符号星号（*）呢？

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

Answer 1

Asterisk语法是一个用于更多罗嗦模板语法的合成糖，该指令扩展到底层，您可以自由使用这些选项。

来自docs：

的引用

星号是＆＃34;语法糖＆＃34;。它简化了ngIf和ngFor for   作家和读者。在引擎盖下，Angular取代了   带有更详细形式的星号版本。

接下来的两个ngIf示例实际上是相同的，我们可以用任何一种风格编写：


<p *ngIf="condition">
  Our heroes are true!
</p>


<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Answer 2

Angular2提供了一种特殊的指令 - Structural directives

结构指令基于<template>标记。

属性选择器之前的*表示应该应用结构指令而不是普通的属性指令或属性绑定。 Angular2在内部将语法扩展为显式<template>标记。

自final以来，还有<ng-container>元素可以与<template>标记类似地使用，但支持更常见的简写语法。例如，当两个结构指令应该应用于一个不受支持的单个元素时，这是必需的。

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Answer 3

Angular以特殊方式处理模板元素。 *语法是一种快捷方式，可以让您无效地编写整个<template>元素。让我告诉你它是如何工作的。

使用此

*ngFor="let t of todos; let i=index"

将其加糖

template="ngFor: let t of todos; let i=index"

脱糖成

<template ngFor [ngForOf]="todos" .... ></template>

还有角度的结构指令，例如以*为前缀的ngFor，ngIf等，以区别于此自定义指令和组件

在此处查看更多

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a

Answer 4

来自Angular docs：

结构指令负责HTML布局。它们通常通过添加，移除或操纵元素来塑造或重塑DOM的结构。

与其他指令一样，您将结构指令应用于主机元件。该指令随后执行它应该做的任何事情主机元素及其后代。

结构指令易于识别。星号（*）位于指令属性名称之前，如本例所示。

<p *ngIf="userInput">{{username}}</p>

Answer 5

有时您可能需要<a *ngIf="cond">，例如，当它只有一个标签时。有时您可能希望将ngIf放在多个标签周围而不使用真正的标签作为包装，从而引导您<template [ngIf]="cond">标签。如何知道角度是否应该在最终结果html中呈现ngIf指令所有者？所以它不仅仅是让代码更清晰。这是必要的差异。

棱角2为什么星号（*）

5 个答案: