Winkel 2 warum Sternchen (*)

In Angular 2-Dokument * und Vorlage wissen wir, dass * ngIf, * ngSwitch, * ngFor zum Tag ng-template erweitert werden kann. Meine Frage ist:

Ich denke, das ngIfoder ngForohne *kann auch von der Angular Engine übersetzt und zum Template-Tag erweitert werden.

Der folgende Code

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

wäre das gleiche wie

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

Warum also ein seltsames Symbol mit einem Sternchen ( *) in Winkel 2 entwerfen ?

Die Asterisk-Syntax ist ein syntatischer Zucker für eine wortreichere Template-Syntax, zu der die Direktive unter der Haube erweitert wird. Sie können jede dieser Optionen verwenden.

Zitat aus den Dokumenten :

Das Sternchen ist "syntaktischer Zucker". Es vereinfacht ngIf und ngFor sowohl für den Schreiber als auch für den Leser. Unter der Haube ersetzt Angular die Sternchenversion durch eine ausführlichere Form.

Die nächsten beiden ngIf-Beispiele sind praktisch gleich und wir können in beiden Stilen schreiben:

<!-- 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 bietet eine spezielle Art von Richtlinien - Strukturrichtlinien

Strukturanweisungen basieren auf dem <template>Tag.

Die *vor dem Attributselektor zeigt an, dass eine strukturelle Richtlinie anstelle einer normalen Attribut Richtlinie oder Eigenschaft angewandt werden soll verbindlich. Angular2 erweitert die Syntax intern zu einem expliziten <template>Tag.

Seit final gibt es auch das <ng-container>Element, das ähnlich wie das <template>Tag verwendet werden kann, aber die allgemeinere Kurzhandsyntax unterstützt. Dies ist beispielsweise erforderlich, wenn zwei strukturelle Richtlinien auf ein einzelnes Element angewendet werden sollen, was nicht unterstützt wird.

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

Angular behandelt Vorlagenelemente auf besondere Weise. Die *Syntax ist eine Verknüpfung, mit der Sie das gesamte <template>Element ungültig schreiben können . Lassen Sie mich Ihnen zeigen, wie es funktioniert.

mit diesem

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

entzuckert es in

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

welche Zucker in

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

Auch die Strukturanweisungen von Angular wie ngFor, ngIf usw. werden vorangestellt, um *sich von diesen benutzerdefinierten Anweisungen und Komponenten zu unterscheiden

Sehen Sie hier mehr

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

Aus Angular-Dokumenten :

Strukturanweisungen sind für das HTML-Layout verantwortlich. Sie formen oder formen die Struktur des DOM, normalerweise durch Hinzufügen, Entfernen oder Bearbeiten von Elementen.

Wie bei anderen Direktiven wenden Sie eine strukturelle Direktive auf ein Hostelement an . Die Direktive macht dann alles, was sie mit diesem Host-Element und seinen Nachkommen tun soll.

Strukturrichtlinien sind leicht zu erkennen. Vor dem Attributnamen der Direktive steht wie in diesem Beispiel ein Sternchen (*).

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

Manchmal brauchen Sie <a *ngIf="cond">zum Beispiel, wenn es nur ein Tag ist. Manchmal möchten Sie die ngIf möglicherweise um mehrere Tags herum platzieren, ohne ein echtes Tag als Wrapper zu haben, das Sie zum <template [ngIf]="cond">Tag führt. Wie kann Angular wissen, ob der Eigentümer der ngIf-Direktive im Endergebnis HTML angezeigt werden soll oder nicht? Es geht also nicht nur darum, den Code klarer zu machen. Es ist ein notwendiger Unterschied.