[解決済み] アスタリスク(*)をつけた理由

質問

Angularのドキュメントで * とテンプレート で、*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でデザインする必要があるのでしょうか？

どのように解決するのですか？

アスタリスクの構文は、ディレクティブがフードの下で展開する、より多くの言葉のテンプレート構文のための構文糖であり、あなたはこれらのオプションのいずれかを自由に使用することができます。

引用元 ドキュメント :

アスタリスクは構文上の糖分です。これは ngIf と ngFor を簡略化するものです。 を簡略化します。フードの下では、Angularはアスタリスク版をより冗長なものに置き換えています。 アスタリスクのバージョンをより冗長なフォームに置き換えます。

次の2つの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>