javascript - Angular 为什么星号(*)

Question

在 Angular 文档中，* and template ，我们知道*ngIf、*ngSwitch、*ngFor可以扩展为ng-template标签。我的问题是:

我认为没有*的ngIf或ngFor也可以被Angular引擎翻译和扩展为模板标签。

下面的代码

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

会和

一样

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

那么为什么还要在 Angular 中设计一个奇怪的符号星号 (*) 呢？

Answer 1

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

引自docs :

The asterisk is "syntactic sugar". It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk version with a more verbose form.

The next two ngIf examples are effectively the same and we may write in either style:

<!-- 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>