Dieser Artikel führt Sie durch das Strukturdirektivenmuster in Angular, stellt vor, was die Strukturdirektive ist und wie man sie verwendet. Ich hoffe, er wird Ihnen hilfreich sein!
Front-End-Einstieg (vue) zum Mastery-Kurs: Einstieg ins Lernen
In Angular gibt es zwei Arten von Anweisungen. Attributdirektiven ändern das Aussehen oder Verhalten von DOM Elementen. Strukturanweisungen fügen DOM Elemente hinzu oder entfernen sie.
Strukturanweisungen sind eine der mächtigsten Funktionen in Angular , werden jedoch häufig missverstanden.
Wenn Sie mehr über Strukturanweisungen erfahren möchten, lesen Sie weiter und erfahren Sie, was sie sind, wofür sie verwendet werden und wie Sie sie in Ihren Projekten verwenden. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]
In diesem Artikel erfahren Sie mehr über das strukturelle Direktivenmuster Angular . Sie wissen, was sie sind und wie man sie verwendet.
Nachdem Sie diesen Artikel gelesen haben, werden Sie diese Anweisungen besser verstehen und sie in tatsächlichen Projekten verwenden können.
Angular Strukturanweisungen sind Anweisungen, die die Struktur DOM ändern können. Diese Anweisungen können添加、移除或者替换元素. Strukturanweisungen haben ein * -Symbol vor ihrem Namen.
In Angular gibt es drei standardmäßige strukturierte Anweisungen.
*ngIf – Fügen Sie eine Vorlage bedingt ein, basierend auf dem booleschen Wert, der vom Ausdruck zurückgegeben wird (d. h. bedingtes Rendern der Vorlage).
*ngFor – über ein Array iterieren
*ngSwitch – Rendert jedes passende Diagramm
Nachfolgend finden Sie ein Beispiel für eine strukturierte Direktive. Die Syntax sieht so aus:
<element ng-if="Condition"></element>
Bedingte Aussagen müssen true oder false sein.
<div *ngIf="worker" class="name">{{worker.name}}</div> Angular generiert ein <ng-template> -Element und wendet dann die *ngIf Direktive an. Dadurch wird es in eine Eigenschaftsbindung in eckigen Klammern umgewandelt [] , wie z. B. [ngIf] . Der Rest <div> , einschließlich des Klassennamens, wird in <ng-template> eingefügt. Zum Beispiel:
<ng-template [ngIf]="worker">
<div class="name">{{worker.name}}</div>
</ng-template> Um strukturelle Direktiven zu verwenden, müssen wir ein Element mit der Direktive in der HTML Vorlage hinzufügen. Fügen Sie dann Elemente hinzu, löschen oder ersetzen Sie sie basierend auf den Bedingungen oder Ausdrücken, die wir in der Direktive festlegen.
Fügen wir einen einfachen HTML Code hinzu.
Der Inhalt der Datei app.component.html lautet wie folgt:
<div style="text-align:center"> <h1> Willkommen </h1> </div> <h2> <app-illustrations></app-illustrations></h2>
*ngIf Direktive Wir verwenden *ngIf um anhand von Bedingungen zu bestimmen, ob ein Element angezeigt oder entfernt werden soll. ngIf ist if-else sehr ähnlich.
Die *ngIf -Direktive entfernt HTML Elemente, wenn der Ausdruck false ist. Bei true wird DOM eine Kopie des Elements hinzugefügt.
Der vollständige *ngIf -Code lautet wie folgt:
<h1> <button (click)="toggleOn =!toggleOn">ng-if-Abbildung</button> </h1> <div *ngIf="!toggleOn"> <h2>Hallo </h2> <p>Guten Morgen, klicken Sie auf die Schaltfläche zum Anzeigen</p> </div> <hr> <p>Heute ist Montag und dies ist ein Dummy-Textelement, damit Sie sich besser fühlen</p> <p>Die ngIf-Direktive mit der else-Klausel verstehen</p>
*ngFor Direktive Wir verwenden die Direktive *ngFor , um das Array zu durchlaufen. Zum Beispiel:
<ul>
<li *ngFor="let wok of Workers">{{ wok }}</li>
</ul> Unsere Komponenten TypeScript Datei:
import { Component, OnInit } from '@angular/core';
@Komponente({
Selektor: 'App-Illustrationen',
templateUrl: './illustrations.component.html',
styleUrls: ['./illustrations.component.css']
})
Die Exportklasse IllustrationsComponent implementiert OnInit {
Arbeiter: any = [
'Arbeiter 1',
'Arbeiter 2',
'Arbeiter 3',
'Arbeiter 4',
'Arbeiter 5',
]
Konstruktor() { }
ngOnInit(): void {
}
}*ngSwitch DirektiveÜbersetzer hinzugefügt: Dieser Befehl ist in der tatsächlichen Entwicklung sehr nützlich
Wir verwenden ngSwitch , um anhand verschiedener bedingter Anweisungen zu entscheiden, welches Element gerendert werden soll. Die *ngSwitch Direktive ist switch -Anweisung sehr ähnlich. Zum Beispiel:
<div [ngSwitch]="Myshopping"> <p *ngSwitchCase="'cups'">Tassen</p> <p *ngSwitchCase="'veg'">Gemüse</p> <p *ngSwitchCase="'clothes'">Hose</p> <p *ngSwitchDefault>Mein Einkauf</p> </div>
Im typescript :
Myshopping: string = '';
Wir haben eine MyShopping Variable, die einen Standardwert hat und zum Rendern bestimmter Elemente im Modul verwendet wird, die die Bedingungen erfüllen.
Wenn der Bedingungswert true ist, werden die relevanten Elemente im DOM gerendert und die verbleibenden Elemente werden ignoriert. Wenn kein Element übereinstimmt, wird das *ngSwitchDefault Element im DOM gerendert.
Wenn Sie ein Element zum DOM hinzufügen oder daraus entfernen möchten, sollten Sie Strukturanweisungen verwenden. Natürlich können wir sie auch verwenden, um Element- CSS Stile zu ändern oder Ereignis-Listener hinzuzufügen. Sie können sie sogar verwenden, um ein neues Element zu erstellen, das vorher nicht existierte.
Die beste Regel lautet: Wenn wir darüber nachdenken, das DOM zu manipulieren, ist es an der Zeit, strukturelle Anweisungen zu verwenden .
Strukturanweisungen sind ein wichtiger Bestandteil von Angular und wir können sie auf vielfältige Weise verwenden.
Ich hoffe, dass die Leser durch diesen Artikel besser verstehen können, wie diese Anweisungen verwendet werden und wann diese Modi verwendet werden.