棱角2为什么星号(*)

Question

在angular 2文档,*和模板中,我们知道*ngIf,*ngSwitch,*ngFor可以扩展为模板标记.我的问题是:

我觉得ngIf还是ngFor没有*也可以翻译并通过角引擎扩展到模板标签.那么为什么要*在角度2中设计一个奇怪的符号asterisk()呢？

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

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

Answer 1

Asterisk语法是更多罗嗦模板语法的合成糖,该指令扩展到引擎盖下,您可以自由使用任何这些选项.

从文档引用:

星号是"语法糖".它简化了作者和读者的ngIf和ngFor.在引擎盖下,Angular用更详细的形式替换了星号版本.

接下来的两个ngIf示例实际上是相同的,我们可以用任何一种样式编写:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Answer 2

Angular2提供了一种特殊的指令 - 结构指令

结构指令基于<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