Wie verwende ich Ng-Template in Angular?

ng-template ist ein Angular-Element, das zum Rendern von HTML-Vorlagen verwendet wird.

Wir verwenden ng-template mit der *ngIf Direktive, um else Vorlage anzuzeigen.

Also was genau wird dieses ng-template tun?

Ob es wirklich HTML-Vorlage macht, werden wir mit einem Beispiel sehen.

<div> ng-template works!</div><ng-template>Inside ng-template tag</ng-template>

Wenn Sie die Ausgabe sehen, wird nur ng-template works angezeigt, die sich im div-Element befindet.Und schauen Sie sich den generierten HTML-Quellcode an.

Anstelle des ng-template -Tags wird ein leerer Kommentarbereich angezeigt. Gehen wir tief in ng-template , um dieses Verhalten zu verstehen.

Was ist ng-template in Angular

1. ng-template ist ein virtuelles Element und sein Inhalt wird nur bei Bedarf angezeigt (basierend auf Bedingungen).
2. ng-template sollte zusammen mit strukturellen Direktiven wie ,, oder benutzerdefinierten strukturellen Direktiven verwendet werden.Aus diesem Grund wird im obigen Beispiel der Inhalt von ng-template nicht angezeigt.
3. ng-template sollte nie wie andere HTML-Elemente verwendet werden. Es ist eine interne Implementierung der strukturellen Direktiven von Angular.
4. Wenn Sie eine strukturelle Direktive in Angular verwenden, fügen wir vor dem Namen der Direktive ein Präfix-Sternchen(*) hinzu. Dieses Sternchen ist eine kurze Handnotation für ng-template.
5. Wann immer Angular auf das Sternchen(*) -Symbol stößt, informieren wir Angular darüber, dass es sich um eine strukturelle Direktive handelt, und Angular konvertiert das Direktive-Attribut in ein ng-template -Element.
6. ng-template ist nicht gerade ein echtes Webelement. Wenn wir unseren Code kompilieren, wird im HTML-DOM kein ng-template -Tag angezeigt.
7. Angular wertet das ng-template -Element aus, um es in einen Kommentarbereich im HTML-DOM umzuwandeln.

Wir werden die verschiedenen strukturellen Direktiven wie *ngIf*ngFor und durchgehen, um dies weiter zu verstehen.

Verwenden von ng-template mit *ngIf Beispiel

Nehmen Sie ein examle der *ngIf Direktive in Angular

<div *ngIf="display" class="ng-template-example"> ng-template example</div><ng-template ="display"> <div class="ng-template-example">ng-template example</div></ng-template>

• Die Direktive wird in ein Datenelement von ng-template
• Das Inline-Template-Element zusammen mit den Attributen (Klasse usw.), die innerhalb der ng-template element

Wir haben also nur then Vorlage, die eine Inline-Vorlage ist, und es gibt keine else Vorlage.Jetzt wird in den Quellcode der NgIf Klasse gegraben, um zu verstehen, wie ng-template Element funktioniert.

Jede strukturelle Direktive in Angular hat zwei Eigenschaften

1. TemplateRef
2. ViewContainerRef

Eine strukturelle Direktive erstellt die Ansicht aus ng-template und fügt es in den Ansichtsbehälter neben dem Hostelement ein.

Das bedeutet, dass die Direktive über TemplateRef auf den Inhalt von ng-template zugreift und den ViewContainerRef aktualisiert

Und wenn Sie den obigen Quellcode der ngIf-Klasse sehen, hat er vier Eigenschaften

1. _thenTemplateRef : ng-template Referenz von then
2. _elseTemplateRef : ng-template Referenz von else
3. _thenViewRef : eingebettete Ansicht ref von then
4. _elseViewRef : eingebettete Ansicht ref von else

Wenn Sie den Konstruktor sehen, hat er zwei Parameter private _viewContainer: ViewContainerRef and _templateRef: TemplateRef<NgIfContext>

Der Konstruktor greift über den Parameter templateRef auf den ng-template zu und weist ihn thenTemplateRef zu. inline-Vorlage wird die Standard-Inline-Vorlage in der ngIf-Direktive sein.

Und im obigen Beispiel übergeben wir keine anderen oder dann Vorlagen und die einzige Eingabe, die wir geben, ist

Basierend auf der Bedingung aktualisieren wir die Ansicht. Siehe den Quellcode der updateView() Methode der NgIf Klasse.

In der Update View-Methode weist Angular thenViewRef der eingebetteten Ansicht zu, die aus thenTemplateRef i erstellt wurde.e, Ansicht von ng-template

Wenn also die Bedingung display wahr ist, wird die Webseite angezeigt I am Visible.

Und Wenn Sie sehen, dass der generierte HTML-Code ng-template in einen Kommentarbereich konvertiert wird, der die Informationen über die ausgewertete Bedingung enthält.

Wenn wir else Vorlage übergeben, wird sie elseTemplateRef

zugewiesen, wenn die Bedingung in updateView() falsch ist Methode Angular weist elseViewRef der eingebetteten Ansicht zu, die aus elseTemplateRef

Und wir können dynamisch ändern sonst oder dann Vorlagen Laufzeit durch Aktualisierung und Template-Referenzen

Mit ng-template mit *ngZum Beispiel

Sie denken vielleicht, dass, warum wir sternchen(*) verwenden notation, wenn wir ng-template Element direkt verwenden können. Ja, wir können ng-template anstelle der kurzen Handnotation verwenden.

*ngIf ist eine einfache Direktive ohne große Komplexität. Diese Sternchen-Notation oder Mikrosyntax (in eckigen Begriffen) ist sehr nützlich bei komplexen strukturellen Direktiven wie *ngFor . Schauen Sie sich das folgende Beispiel an

<div *ngFor="let task of tasks; let i=index; let even=even; trackBy: trackById"> ({{i}}) {{task.name}}</div><ng-template ngFor let-task ="tasks" let-i="index" let-even="even" ="trackById"><div>({{i}}) {{task.name}}</div></ng-template>

Mit der Sternchen-Notation oder Angular microsyntax können wir der Direktive Anweisungen im einfachen String-Format geben. Und Angular microsyntax Parser konvertiert diese Zeichenfolge in die Attribute von ng-template wie oben gezeigt

Ich möchte nicht auf die Implementierungsdetails von *ngFor eingehen. Alles, was wir verstehen müssen, ist Sternchen (*) Notation einfach zu schreiben und zu verstehen.

Bis wenn Sie keinen guten Grund haben, bevorzugen Sie die Sternchen(*) -Notation anstelle von ng-template

Verwenden von ng-template mit ngSwitch-Beispiel

NgSwitch ist keine einzige Direktive, die tatsächlich zusammen mit anderen Direktiven verwendet wird *ngSwitchCase und*ngSwitchDefault

Schauen Sie sich das folgende an ngSwitch Beispiel

<div ="Course"> <p *ngSwitchCase="'Angular'">Angular Course</p> <p *ngSwitchCase="'TypeScript'">TypeScript Course</p> <p *ngSwitchCase="'JavaScript'">JavaScript Course</p> <p *ngSwitchDefault>HTML Course</p> </div><div ="Course"> <ng-template *ngSwitchCase="'Angular'"> <p>Angular Course</p> </ng-template> <ng-template ="'TypeScript'"> <p>TypeScript Course</p> </ng-template> <ng-template ="'JavaScript'"> <p>JavaScript Course</p> </ng-template> <ng-template > <p>HTML Course</p> </ng-template></div>

Wenn Sie den obigen Code sehen, habe ich asterisk noch nicht verwendet ngSwitch warum, weil ngSwitch keine strukturelle Direktive ist. Es ist eine Attribut-Direktive.

ngSwitch steuert das Verhalten der beiden anderen Switch-Direktiven ngSwitchCase und ngSwitchDefault.

Beide ngSwitchCasengSwitchDefault sind strukturelle Direktiven, deshalb habe ich asterisk vor ihnen verwendet. Und diese werden in ng-template Elemente

Zusammenfassung

Ich hoffe, Sie verstehen, was ng-template in Angular ist und warum es nützlich ist. Und wenn Sie Ihre eigenen strukturellen Direktiven schreiben, sollten Sie eine klare Vorstellung davon haben ng-template>

In meinem nächsten Artikel werde ich erklären, wie Sie eine benutzerdefinierte Strukturrichtlinie schreiben mit Hilfe von ng-template