Angular 2为什么使用星号（*）

90

在angular 2文档*和template中，我们知道* ngIf，* ngSwitch，* ngFor可以扩展为ng-template标签。我的问题是：

我觉得ngIf还是ngFor没有*也可以翻译并通过角引擎扩展到模板标签。

以下代码

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

将与

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

那么，为什么还要*在角2中设计一个奇怪的符号asterisk（）呢？

javascript angular

— 最大编码器
source

在链接中，我们没有看到<template>标签，因为*前缀语法使我们可以跳过这些标签，而直接关注包含，排除或重复的HTML元素。

— Tushar

1

angular.io/docs/ts/latest/guide/…–

— TGH

3

您可以选择直接使用模板标签，否则可以使用*来为您处理模板标签。-来源

— Tushar

89

星号语法是一种语法糖，可用于更多罗word的模板语法，该指令可扩展到后台，您可以自由使用这些选项中的任何一个。

从文档引用：

星号是“语法糖”。它为编写者和阅读者简化了ngIf和ngFor。在引擎盖下，Angular用更详细的形式替换了星号版本。

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



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


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

— Klaster_1
source

这就是文件所说的。抱歉，我的意思表达不正确，我更改了问题的详细信息。

— maxisacoder

2

我的意思是为什么要设计这种糖，为什么不使用*进行默认扩展。

— maxisacoder '16

2

我可以想到以下几个原因：1.ngIf="expression"不是输入绑定。如果您从DOM中获取值，那么它将是一个字符串。2.框架将需要了解ngIf以及其他作为特殊情况。当然，在DDO上的某个地方指定一个布尔属性即可，但是您必须查看代码/文档才能知道常规属性和结构化指令糖之间的区别。3.方括号，方括号，括号和括号的缺乏清楚地表明了模板阅读器正在发生的情况。

— Klaster_1 '01 -10-17

1

为什么在ng1中不带星号，写ng-if，ng-show等为何能正常工作？

— RubberDuckRabbit

1

@RubberDuckRabbit，因为ng1具有完全不同的绑定实现。已针对ng2 +重新设计。

— Klaster_1

32

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

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

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

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

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

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

21

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等，其前缀*只是为了与该自定义指令和组件区分开

— 帕迪普·Ja那
source

3

从Angular文档：

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

与其他指令一样，您将结构指令应用于host元素。然后，该指令执行与该主机元素及其后代有关的所有操作。

结构指令很容易识别。在此示例中，星号（*）位于指令属性名称之前。

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

— 编码器
source

2

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

— 达里什·阿里普（Dariush Alipour）
source