{{worker.name}}

Wie funktionieren Angular-Strukturanweisungen?

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.

Beispiele für Strukturanweisungen

Fügen wir einen einfachen HTML Code hinzu.

Der Inhalt der Datei app.component.html lautet wie folgt:

 


Willkommen


 

So verwenden Sie die *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:

 

	ng-if-Abbildung


Hallo 
Guten Morgen, klicken Sie auf die Schaltfläche zum Anzeigen


Heute ist Montag und dies ist ein Dummy-Textelement, damit Sie sich besser fühlen
Die ngIf-Direktive mit der else-Klausel verstehen

So verwenden Sie *ngFor Direktive

Wir verwenden die Direktive *ngFor , um das Array zu durchlaufen. Zum Beispiel:

 


{{ wok }}

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 {
}

}

So verwenden Sie die *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:

 

Tassen
Gemüse
Hose
Mein Einkauf

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.

Wann müssen wir Strukturanweisungen in Angular verwenden?

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 .

Zusammenfassen

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.