Übersicht über Winkelanweisungen
In Angular sind Direktiven ein Mechanismus zum Erweitern und Ändern des Verhaltens und Erscheinungsbilds von Komponenten. Anweisungen können von Entwicklern angepasst werden oder es kann sich um integrierte Anweisungen handeln, die vom Angular-Framework bereitgestellt werden. Mithilfe von Direktiven können wir Komponenten über Attribute oder Elementnamen in HTML-Vorlagen manipulieren.
Direktiven werden in Angular hauptsächlich in drei Typen unterteilt:
- Komponentenrichtlinien
Komponentenanweisungen sind Anweisungen mit Vorlagen, die wiederverwendbare UI-Komponenten darstellen. Komponentendirektiven werden mit dem @Component-Dekorator definiert, und das Selektorattribut gibt an, wie die Komponentendirektive in HTML-Vorlagen verwendet wird.
Die Komponentenanweisungen von Angular umfassen hauptsächlich den Komponentendekorator @Component. Beispiele sind wie folgt:
@Komponente:
Hier ist ein Beispiel für die @Component-Direktive:
import {
Component } from '@angular/core';
@Component({
selector: 'app-example',
template: '<h1>Hello, World!</h1>'
})
export class ExampleComponent {
}
In diesem Beispiel akzeptiert der @Component-Dekorator ein Metadatenobjekt, das einige grundlegende Eigenschaften der Komponente enthält. Das Selector-Attribut definiert, wie diese Komponente in HTML-Vorlagen verwendet wird. Hier definieren wir sie als App-Beispiel. Das Template-Attribut definiert die HTML-Vorlage der Komponente, hier zeigen wir einfach einen Titel an.
Darüber hinaus kann der @Component-Dekorator auch viele andere Metadaten wie Stile, Anbieter usw. akzeptieren, die zur Definition und Konfiguration von Angular-Komponenten verwendet werden.
- Strukturrichtlinien
Strukturanweisungen werden verwendet, um die Struktur von Elementen oder Elementsammlungen basierend auf Bedingungen dynamisch zu manipulieren. Zu den gängigen Strukturanweisungen gehören *ngIf, *ngFor, *ngSwitch usw. Sie steuern das Ein- oder Ausblenden, Kopieren oder Löschen von Elementen durch Ändern der DOM-Struktur.
- Attributanweisungen
Attributanweisungen werden verwendet, um das Erscheinungsbild oder Verhalten eines Elements zu ändern, z. B. um den Stil des Elements zu ändern oder Attribute des Elements hinzuzufügen/zu entfernen. Zu den integrierten Attributanweisungen gehören ngClass, ngStyle, ngModel usw.
Funktionen der Winkeldirektive
Direktiven in Angular haben die folgenden Eigenschaften:
Direktiven sind die Basis von Komponenten: In Angular sind Komponenten im Wesentlichen Direktiven mit Vorlagen und einem gewissen Verhalten. Daher ist die Komponentendirektive eine der am häufigsten verwendeten und wichtigsten Direktiven in Angular.
Direktiven können vorhandene Komponenten und HTML-Elemente erweitern und ändern: Durch die Verwendung von Direktiven können wir neue Verhaltensweisen und Funktionen auf vorhandene Komponenten und HTML-Elemente erweitern. Beispielsweise können wir eine Anweisung erstellen, um das Ziehen auf einem Element zu ermöglichen.
Direktiven stellen wiederverwendbare Komponenten und Funktionen bereit: Durch die Verwendung von Direktiven können wir bestimmte Komponenten oder Funktionen in wiederverwendbaren Direktiven zur Wiederverwendung in mehreren Projekten kapseln. Dies verbessert die Wartbarkeit und Wiederverwendbarkeit des Codes.
Anweisungen können durch DOM-Operationen verschiedene Effekte erzielen: Mithilfe von Anweisungen können wir Elemente und Attribute im DOM dynamisch hinzufügen, löschen oder ändern, um bestimmte Effekte zu erzielen.
Direktiven können mit Diensten und anderen Direktiven interagieren: Direktiven können sich auf andere Direktiven oder Services stützen, um komplexere Interaktionen und Funktionen zu erreichen.
Anweisungen verfügen über einen umfangreichen Deklarationszyklus: Anweisungen verfügen über mehrere Lebenszyklus-Hooks, die unterschiedliche Logik in verschiedenen Phasen wie der Erstellung, Aktualisierung und Zerstörung von Anweisungen ausführen können. Diese Lebenszyklus-Hooks bieten umfassendere Befehlssteuerungs- und Erweiterungsfunktionen.
Allgemeine Winkelbefehle
Zu den gängigen Direktiventypen im Angular-Framework gehören Strukturdirektiven und Attributdirektiven.
Strukturrichtlinien:
Wenn:
Steuern Sie das Anzeigen und Ausblenden von Elementen basierend auf Bedingungen.
<div *ngIf="showElement">显示的内容</div>
ngFor:
Durchlaufen Sie eine Sammlung und generieren Sie für jedes Element entsprechende DOM-Elemente.
<ul>
<li *ngFor="let item of items">{
{ item }}</li>
</ul>
ngSwitch:
Zeigen Sie verschiedene Elemente basierend auf Bedingungen an.
<div [ngSwitch]="condition">
<div *ngSwitchCase="1">条件1</div>
<div *ngSwitchCase="2">条件2</div>
<div *ngSwitchDefault>默认条件</div>
</div>
Attributanweisung:
ngClass:
CSS-Klassen zum dynamischen Hinzufügen und Entfernen von Elementen basierend auf Bedingungen.
<div [ngClass]="{'highlight': isHighlighted, 'italic': isItalic}">文本内容</div>
ngStyle:
Legen Sie den Inline-Stil eines Elements dynamisch basierend auf Bedingungen fest.
<div [ngStyle]="{'color': textColor, 'font-size.px': fontSize}">文本内容</div>
ngModel:
Implementieren Sie eine bidirektionale Datenbindung, um die Werte von Formularsteuerelementen mit Komponentendaten zu synchronisieren.
<input [(ngModel)]="name" placeholder="姓名">
Beispiel für eine Winkeldirektive
Im Folgenden finden Sie ein detailliertes Codebeispiel für eine Angular-Direktive, das zeigt, wie Sie eine benutzerdefinierte Direktive erstellen und mit einem Dienst interagieren:
Erstellen Sie eine benutzerdefinierte Anweisung:
import {
Directive, ElementRef, Input, OnInit } from '@angular/core';
import {
MyService } from './my.service';
@Directive({
selector: '[myCustomDirective]'
})
export class MyCustomDirective implements OnInit {
@Input() myCustomDirective: string;
constructor(private elementRef: ElementRef, private myService: MyService) {
}
ngOnInit(): void {
// 在指令初始化时执行的逻辑
this.elementRef.nativeElement.style.backgroundColor = 'yellow';
// 使用服务中的方法
const result = this.myService.doSomething();
console.log(result);
}
}
Erstellen Sie einen Dienst:
import {
Injectable } from '@angular/core';
@Injectable()
export class MyService {
doSomething(): string {
return 'Service method called.';
}
}
Verwendungsanweisungen in Komponenten:
<div myCustomDirective="example"></div>
In diesem Beispiel haben wir eine benutzerdefinierte Direktive namens myCustomDirective erstellt, die die Hintergrundfarbe des passenden Elements auf Gelb setzt, die doSomething-Methode des Dienstes MyService im ngOnInit-Lebenszyklus-Hook der Direktive aufruft und das Ergebnis auf der Konsole ausgibt.
Um eine benutzerdefinierte Direktive verwenden zu können, müssen wir sie zum Deklarationsarray des Angular-Moduls hinzufügen und sicherstellen, dass die relevanten Dienste ebenfalls eingefügt und bereitgestellt werden.
Ich bin gerade mit Angular in Kontakt gekommen und hoffe, das theoretische Wissen und einfache Beispiele zusammenzufassen, um denjenigen zu helfen, die Angular in Zukunft lernen werden.
Dapeng erhebt sich mit dem Wind und fliegt an einem Tag bis zu 90.000 Meilen weit
Auf geht's
ENDE