Eckig warum Sternchen

Lesezeit: 4 Minuten

ng0me
Benutzer-Avatar

maxisacoder Im Angular-Dokument,* und Vorlage

, wissen wir, dass *ngIf, *ngSwitch, *ngFor zum ng-template-Tag erweitert werden können. Meine Frage ist: ngIf Ich denke, die ngFor oder * ohne

kann auch von der Angular-Engine zum Template-Tag übersetzt und erweitert werden.

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

Der folgende Code

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

wäre dasselbe wie*Warum sich also die Mühe machen, ein seltsames Symbol Sternchen (

  • ) in eckig? Aus dem Link, <template> Die haben wir nicht gesehen * Tags, weil die

    Die Präfix-Syntax ermöglichte es uns, diese Tags zu überspringen und uns direkt auf das HTML-Element zu konzentrieren, das wir einschließen, ausschließen oder wiederholen.

    – Tuschar

  • 17. Oktober 2016 um 3:46 Uhr

    angle.io/docs/ts/latest/guide/…

    – TGH

  • 17. Oktober 2016 um 3:50 Uhr Sie haben die Wahl, das Template-Tag direkt zu verwenden, andernfalls können Sie das * verwenden, das das Template-Tag für Sie übernimmt.

    Quelle

    – Tuschar

17. Oktober 2016 um 3:50 Uhr
Benutzer-Avatar

Klaster_1 Нет войне

Die Asterisk-Syntax ist ein syntaktischer Zucker für eine wortreichere Template-Syntax, deren Direktive sich unter der Haube ausdehnt, Sie können jede dieser Optionen frei verwenden. Zitat aus derDokumente

:

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 Sternchen-Version durch eine ausführlichere Form.

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

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

    Ich meine, warum diesen Zucker entwerfen, warum einfach standardmäßig erweitern, ohne *.

    – Maxicoder

  • 17. Oktober 2016 um 5:21 Uhr ngIf="expression" Dafür fallen mir mehrere Gründe ein: 1. ngIf ist keine Eingabebindung. Wenn Sie den Wert von DOM erhalten, handelt es sich um eine Zeichenfolge. 2. Framework müssen Sie kennen

    und andere sind der Spezialfall. Sicher, die Angabe eines booleschen Attributs irgendwo auf DDO reicht aus, aber Sie müssen sich Code/Dokumente ansehen, um den Unterschied zwischen regulärem Attribut und strukturellem Direktivenzucker zu kennen. 3. Eckige Klammern, Sternchen, runde Klammern und deren Fehlen propagieren klar, was an den Vorlagenleser vor sich geht.

    – Klaster_1 Нет войне

  • 17. Oktober 2016 um 8:41 Uhr

    Warum hat es in ng1 ohne Sternchen funktioniert, ng-if, ng-show usw. zu schreiben?

    – QuietscheenteHase

  • 4. Dezember 2017 um 19:32 Uhr

    @RubberDuckRabbit, weil ng1 eine völlig andere Bindungsimplementierung hat. Es wurde für ng2+ neu gestaltet.

    – Klaster_1 Нет войне

  • 5. Dezember 2017 um 2:12 Uhr

    Nun, Entwickler von Angular stehen leider nicht auf eine “nette” Syntax.

    – RoboRobok

8. November 2020 um 0:49 Uhr
Benutzer-Avatar

Günter Zöchbauer Angular2 bietet eine besondere Art von Direktiven –

Strukturelle Richtlinien <template> Strukturelle Richtlinien basieren auf der

Schild. * Das <template> bevor der Attributselektor anzeigt, dass eine Strukturdirektive anstelle einer normalen Attributdirektive oder Eigenschaftsbindung angewendet werden soll. Angular2 erweitert intern die Syntax zu einer expliziten

Schild. <ng-container> Seit Final gibt es auch die <template> Element, das ähnlich wie das verwendet werden kann

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

-Tag, unterstützt jedoch die gebräuchlichere Kurzschreibweise.  Dies ist beispielsweise erforderlich, wenn zwei Strukturrichtlinien auf ein einzelnes Element angewendet werden sollen, was nicht unterstützt wird.
Benutzer-Avatar

Pardeep Jain * Angular behandelt Template-Elemente auf besondere Weise. Das <template> Syntax ist eine Abkürzung, mit der Sie vermeiden können, das Ganze zu schreiben

Element. Lassen Sie mich Ihnen zeigen, wie es funktioniert.

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

dies verwenden

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

übersetzt es in

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

die dann umgewandelt wird ngForauch Agulars Strukturdirektiven wie ngIf , * usw. Vorangestellt von

nur um sie von anderen benutzerdefinierten Anweisungen und Komponenten zu unterscheiden

siehe mehr hier AusEckige Dokumente

:

Strukturdirektiven sind für das HTML-Layout verantwortlich. Sie formen oder verändern die Struktur des DOM, typischerweise durch Hinzufügen, Entfernen oder Manipulieren von Elementen. Wie bei anderen Direktiven wenden Sie eine Strukturdirektive auf a anHost-Element

. Die Direktive macht dann alles, was sie mit diesem Host-Element und seinen Nachkommen machen soll.

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

Strukturelle Direktiven sind leicht zu erkennen. Ein Sternchen <a *ngIf="cond"> steht wie in diesem Beispiel vor dem Namen des Direktivenattributs. <template [ngIf]="cond"> Manchmal brauchen Sie vielleicht

1205290cookie-checkEckig warum Sternchen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy