Informationen zur grundlegenden Verwendung integrierter Direktiven in Angular4

Der folgende Artikel führt Sie hauptsächlich in die grundlegende Verwendung der integrierten Anweisungen in Angular4 ein. Freunde, die ihn benötigen, können einen Blick darauf werfen.

Ich muss sagen, dass Anweisungen eine der mächtigsten Funktionen von ng sind. Nun, Sie können eine davon auch entfernen.

Vorwort

Jeder weiß, dass ng viele integrierte benutzerdefinierte Anweisungen hat, was uns davon abhält, das Rad selbst neu zu erfinden. Gleichzeitig bietet ng auch die Funktion benutzerdefinierter Anweisungen, mit denen unsere Seitenelement-Tags besser instanziiert werden können.

In diesem Artikel werden wir die Verwendung jedes integrierten Befehls aufzählen und ein Beispiel zur Demonstration bereitstellen. Versuchen Sie, die einfachste und einfachste Beschreibung zu verwenden, damit Sie die grundlegende Verwendung jedes integrierten Befehls schneller und genauer erlernen können.

ngFor

Funktion: Wie bei einer for-Schleife können Sie wiederholt Werte aus dem Array übernehmen und anzeigen.

Beispiel:

// .ts

this.userInfo = ['张三', '李四', '王五'];

// .html

<p class="ui list" *ngFor="let username of userInfo">
 <p class="item">{{username}}</p>
</p>

Erklärung:

Seine Syntax ist *ngFor="let username of userInfo", wobei userInfo das Array ist, aus dem Werte entnommen werden, und username der jedes Mal daraus entnommene Wert ist. Dann wird der Inhalt dieses Tags wiederholt ausgeführt und der Benutzername wird durch bidirektionale Bindung angezeigt.

ngIf

Funktion: Entscheiden Sie, ob dieses Element basierend auf Bedingungen angezeigt oder ausgeblendet werden soll.

Beispiel:

// .html

<p *ngIf="false"></p>
<p *ngIf="a > b"></p>
<p *ngIf="username == &#39;张三&#39;"></p>
<p *ngIf="myFunction()"></p>

Erklärung:

• Nie angezeigt

• Wird angezeigt, wenn a größer als b ist

• Wird angezeigt, wenn Benutzername gleich Zhang San ist

• Entscheiden Sie, ob

ngSwitch< angezeigt werden soll, basierend auf dem Rückgabewert der Funktion myFunction() 🎜 >

Funktion: Verhindern Sie, dass komplexe Erkrankungen zu einer übermäßigen Verwendung von ngIf führen.

Beispiel:

// .html

<p class="container" [ngSwitch]="myAge">
 <p *ngSwitchCase="&#39;10&#39;">age = 10</p>
 <p *ngSwitchCase="&#39;20&#39;">age = 20</p>
 <p *ngSwitchDefault="&#39;18&#39;">age = 18</p>
</p>

Erklärung:

[ngSwitch] Zuerst an das Ziel binden, ngSwitchCase listet jede Möglichkeit auf und ngSwitchDefault listet den Standardwert auf.

ngStyle

Funktion: Sie können dynamische Werte verwenden, um CSS-Eigenschaften für bestimmte DOM-Elemente festzulegen.

Beispiel:

// .ts
backColor: string = 'red';

// .html
<p [style.color]="yellow">
 你好，世界
</p>
<p [style.background-color]="backColor">
 你好，世界
</p>
<p [style.font-size.px]="20">
 你好，世界
</p>
<p [ngStyle]="{color: &#39;white&#39;, &#39;background-color&#39;: &#39;blue&#39;, &#39;font-size.px&#39;: &#39;20&#39;}">
 你好，世界
</p>

Erklärung:

• Stellen Sie die Farbe direkt auf Gelb ein.

• Setzen Sie die Hintergrundfarbe auf backColor und ändern Sie den Wert von backColor in der .ts-Datei.

• Stellen Sie die Schriftgröße ein. Beachten Sie, dass beim Schreiben nur „font-size“ ein Fehler gemeldet wird. Sie müssen am Ende .px hinzufügen. Natürlich sind .em .% alle akzeptabel.

• Die ersten drei bestehen darin, nur eine festzulegen, [ngStyle] zu schreiben, um mehrere gleichzeitig zu schreiben, und geschweifte Klammern zu verwenden, um die innere Stärke einzuschließen. Es ist zu beachten, dass der Bindestrich - nicht im Schlüsselnamen des Objekts vorkommen darf. Wenn Sie Hintergrundfarbe usw. verwenden, müssen Sie einfache Anführungszeichen hinzufügen.

ngClass

Funktion: Den Inhalt eines bestimmten DOM-Elements dynamisch festlegen und ändern CSS-Klasse.

Beispiel:

// .scss
.bordered {
 border: 1px dashed black;
 background-color: #eee;
}

// .ts
isBordered: boolean = true;
 
// .html
<p [ngClass]="{bordered: isBordered}">
 是否显示边框
</p>

Erklärung:

Das Festlegen des Stils in

• scss entspricht dem Erstellen eines

  . Es gibt ein neues isBordered in class="bordered"

• ts, mit dem bestimmt wird, ob der Stil in .scss angezeigt werden soll.

• In HTML wird isBordered als Grundlage für die Beurteilung verwendet, ob ein Rand angezeigt wird.

ngNonBindable

Funktion: weist Angular an, einen bestimmten Teil der Seite nicht zu binden .

Beispiel:

.html

<p ngNonBindable>
 {{我不会被绑定}}
</p>

Erklärung:

Mit ngNonBindable werden die geschweiften Klammern zusammen als Zeichenfolge angezeigt.

Zusammenfassung

In der täglichen Entwicklung sollten ngFor und ngIf am häufigsten verwendet werden, daher werden sie zuerst geschrieben. Was ngNonBindable betrifft, habe ich es in der tatsächlichen Entwicklung noch nie verwendet. Ich habe nur die Informationen überprüft und getestet, bevor ich sie niedergeschrieben habe.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So deaktivieren Sie das Vorlagen-Caching in AngularJs

So leeren Sie den Browser-Cache in AngularJs

Das obige ist der detaillierte Inhalt vonInformationen zur grundlegenden Verwendung integrierter Direktiven in Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!