角2为什么星号(*)

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

我认为ngIfngFor without *也可以通过角度引擎翻译并扩展为模板标签。 那么为什么还要设计一个奇怪的符号星号( * )角2?

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

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>

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

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

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

由于final也有<ng-container>元素,它可以类似于<template>标签使用,但支持更常见的<template>句法。 例如,当两个结构指令应用于不支持的单个元素时,就需要这样做。

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

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

使用这个

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

将它去糖

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

其中脱糖成

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

还有angular的结构指令,如ngFor,ngIf等,前缀为*仅用于区分这些自定义指令和组件

在这里看到更多

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

链接地址: http://www.djcxy.com/p/31041.html

上一篇: angular 2 why asterisk (*)

下一篇: DevExtreme DataGrid onRowDblClick