Winkel 2 warum Sternchen (*)

87

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 ?

javascript angular Maxisacoder
quelle
Über den Link haben wir die <template>Tags nicht gesehen, da die *Präfixsyntax es uns ermöglichte, diese Tags zu überspringen und uns direkt auf das HTML-Element zu konzentrieren, das wir einschließen, ausschließen oder wiederholen.
Tushar
1
angle.io/docs/ts/latest/guide/…
TGH
2
Sie haben die Wahl, das Vorlagen-Tag direkt zu verwenden. Andernfalls können Sie das * verwenden, das das Vorlagen-Tag für Sie erledigt. - Quelle
Tushar

Antworten:

87

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>
Klaster_1
quelle
das steht im Dokument. Entschuldigung für ungenaue Ausdrücke meiner Bedeutung, ich habe das Fragendetail geändert.
Maxisacoder
1
Ich meine, warum diesen Zucker entwerfen, warum nur standardmäßig erweitern, ohne * zu verwenden.
Maxisacoder
Sie möchten wissen, warum Sie nicht einfach die gleiche Syntax wie in Fall (A) verwenden, jedoch ohne Sternchen?
Klaster_1
Genau, warum bringt Angular Designer dieses * nicht in die Syntax?
Maxisacoder
2
Es gibt mehrere Gründe, an die ich denken kann: 1. ngIf="expression"ist keine Eingabebindung. Wenn Sie den Wert von DOM erhalten, handelt es sich um eine Zeichenfolge. 2. Das Framework muss über ngIfden Sonderfall Bescheid wissen . Sicher, die Angabe eines booleschen Attributs irgendwo in DDO reicht aus, aber Sie müssen sich mit Code / Dokumenten befassen, um den Unterschied zwischen regulärem Attribut und Zucker der Strukturanweisung zu erkennen. 3. Eckige Klammern, Aserisk, Klammern und deren Fehlen geben deutlich an, was mit dem Vorlagenleser los ist.
Klaster_1
31

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>
Günter Zöchbauer
quelle
18

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

Pardeep Jain
quelle
3

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>
coderpc
quelle
2

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.

Dariush Alipour
quelle