Angular 2なぜアスタリスク（*）

Angular 2ドキュメント*およびテンプレートでは、* 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で奇妙な記号アスタリスク（）をわざわざ設計するのでしょうか。

アスタリスク構文は、ディレクティブが内部で拡張される、より単語の多いテンプレート構文のシンタティックシュガーです。これらのオプションはどれでも自由に使用できます。

ドキュメントからの引用：

アスタリスクは「シンタックスシュガー」です。これにより、ライターとリーダーの両方の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>

Angular2は特別な種類のディレクティブを提供します-構造ディレクティブ

構造ディレクティブは<template>タグに基づいています。

*属性セレクターの前は、通常の属性ディレクティブまたはプロパティバインディングの代わりに構造ディレクティブを適用する必要があることを示します。Angular2は、構文を明示的な<template>タグに内部的に拡張します。

final以降<ng-container>、<template>タグと同様に使用できる要素もありますが、より一般的な短縮構文をサポートしています。これは、たとえば、サポートされていない1つの要素に2つの構造ディレクティブを適用する必要がある場合に必要です。

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

また*、このカスタムディレクティブやコンポーネントと区別するために、ngFor、ngIfなどの接頭辞が付いたangularの構造ディレクティブもあります。

詳細はこちら

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

Angularドキュメントから：

構造ディレクティブはHTMLレイアウトを担当します。これらは、通常、要素を追加、削除、または操作することによって、DOMの構造を形成または再形成します。

他のディレクティブと同様に、構造ディレクティブをホスト要素に適用します。次に、ディレクティブは、そのホスト要素とその子孫に対して行うことになっていることをすべて実行します。

構造ディレクティブは簡単に認識できます。この例のように、アスタリスク（*）がディレクティブ属性名の前にあります。

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

<a *ngIf="cond">たとえば、タグが1つしかない場合などに必要になることがあります。タグにつながるラッパーとして実際のタグを使用せずに、複数のタグの周りにngIfを配置したい場合があります<template [ngIf]="cond">。最終結果のhtmlでngIfディレクティブの所有者をレンダリングする必要があるかどうかをAngularはどのように知ることができますか？つまり、コードをより明確にするだけではありません。それは必要な違いです。