Javascript 角度2为什么星号（*）

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

我认为没有

*

的

ngIf

或

ngFor

也可以通过角度引擎翻译并扩展为模板标签

下面的代码

就跟

---

那么，为什么要在angular 2中设计一个奇怪的符号星号（

*

）呢？

星号语法是一种语法糖分，对于指令扩展到引擎盖下的更冗长的模板语法，您可以自由使用这些选项中的任何一个

引自：

星号是“语法糖”。它简化了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>

我们的英雄是真的！


我们的英雄是真的！

---

Angular以一种特殊的方式处理模板元素。

*

语法是一种快捷方式，可以避免编写整个

元素。让我告诉你它是如何工作的

用这个

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

翻译成

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

然后转换成

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

此外，Agular的结构化指令，如

ngFor

，

ngIf

等，前缀为

*

，只是为了将它们与其他自定义指令和组件区分开来

---

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

结构指令基于

标记

属性选择器前面的

*

指示应应用结构指令，而不是常规属性指令或属性绑定。Angular2在内部将语法扩展为显式的

标记

因为final还有

元素，它可以类似于

标记使用，但支持更常见的简写语法。例如，当两个结构指令应应用于不受支持的单个元素时，这是必需的

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

---

有时您可能需要

，例如，当它只有一个标记时。有时，您可能希望将ngIf放在多个标记周围，而不使用真正的标记作为包装，这会导致您使用

标记。angular如何知道它是否应该在最终结果html中呈现ngIf指令所有者？因此，这不仅仅是让代码更清晰。这是一个必要的区别。

来自：

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

与其他指令一样，可以将结构指令应用于主体 元素。然后指令执行它应该执行的任何操作 该宿主元素及其子元素

结构指令很容易识别。如本例所示，指令属性名称前面有一个星号（*）

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

{{{username}

从链接中，我们没有看到

标记，因为

*

前缀语法允许我们跳过这些标记，直接关注包含、排除或重复的HTML元素。直接使用模板标记是您的选择，其他方面，您可以使用*为您处理模板标记。-我的意思是，为什么要设计这种糖，为什么不用*，默认情况下只进行扩展

ngIf=“expression”

不是输入绑定。如果您从DOM中获取值，它将是一个字符串。2.框架需要了解ngIf和其他特殊情况。当然，在DDO的某个地方指定一个布尔属性就可以了，但是您必须查看代码/文档，以便了解常规属性和结构化属性之间的区别。3.方括号、ASERRISK、圆括号和缺少它们都会清楚地向模板阅读器传播正在发生的事情。为什么ng1中没有星号就可以写ng if、ng show等？@RubberDuckRabbit因为ng1有完全不同的绑定实现。它是为ng2+重新设计的。遗憾的是，Angular的开发人员肯定没有使用“好”的语法。