Eine kurze Diskussion über 5 Kommunikationsmethoden zwischen Angular-Komponenten

Wie kommuniziere ich zwischen Angular-Komponenten? Der folgende Artikel stellt Ihnen die 5 Kommunikationsmethoden zwischen Angular-Komponenten vor. Bei Bedarf können Sie darauf zurückgreifen~

Komponenten sind die Baueinheiten von Angular, um diese Daten sicherzustellen zwischen Komponenten kann hin und her gesendet werden. Angular kapselt einige Methoden, die die Kommunikation zwischen Komponenten ermöglichen. [Verwandte Tutorial-Empfehlungen: „Angular Tutorial“]

1. Die übergeordnete Komponente übergibt Daten über die Eingabebindung an die untergeordnete Komponente

parent.component.ts

age = 18;
name = '  xiaoming '

parent.component . html Maßnahmen ergreifen.

child1.component.ts

<app-child-1 [age]="age" [name]="name"></app-child-1>

2. Verwenden Sie die Hook-Funktion ngOnChanges(), um Änderungen in Eingabeattributwerten zu überwachen und darauf zu reagieren. Diese Methode ist besser geeignet als die Verwendung von Eigenschaftssettern, wenn mehrere interaktive Eingabeeigenschaften überwacht werden müssen.

child1.component.ts

@Input() age!: number;

Wir können über die von Angular offiziell bereitgestellte Typbeschreibungsdatei mehr über die zugehörigen Eigenschaften von SimpleChange erfahren:

2. Die übergeordnete Komponente hört auf das Ereignis des untergeordneten Elements Komponente und ruft die untergeordnete Komponente ab und übergibt sie an den Wert der übergeordneten Komponente

Die untergeordnete Komponente stellt eine EventEmitter-Eigenschaft (mit @Output-Dekorator) bereit. Wenn das Ereignis auftritt, verwendet die untergeordnete Komponente diese Eigenschaft, um den Wert an die auszugeben übergeordnete Komponente. Die übergeordnete Komponente bindet an diese Ereigniseigenschaft und reagiert, wenn das Ereignis auftritt.

Untergeordnete Komponente

child1.component.ts

@Input()
set name(name: string) {
    this._name = name.trim();
}
private _name: string;

child1.component.html

ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
}

Übergeordnete Komponente

parent.component.html

@Output() voted = new EventEmitter<boolean>();
emitValue(): void {
    this.voted.emit(true);
}

parent.component.ts

<button (click)="emitValue()">Click</button>

Drei, Vater Die Komponente liest die Eigenschaften der untergeordneten Komponente und ruft die Methode der untergeordneten Komponente in der Vorlage über lokale Variablen (#variableName) auf parent.component.html

<app-child-1 [age]="age" [name]="name" (voted)="getChildParam($event)"></app-child-1>

Einschränkungen: Verbindungen zwischen übergeordneten Komponenten und untergeordneten Komponenten müssen alle in der Vorlage der übergeordneten Komponente hergestellt werden. Wenn die Klasse der übergeordneten Komponente den Eigenschaftswert der untergeordneten Komponente lesen oder die Methode der untergeordneten Komponente aufrufen muss, kann sie die Methode der lokalen Variablen nicht verwenden.

4. Die übergeordnete Komponente ruft @ViewChild auf

Wenn die Klasse der übergeordneten Komponente den Eigenschaftswert der untergeordneten Komponente lesen oder die Methode der untergeordneten Komponente aufrufen muss, kann sie die lokale Variablenmethode nicht verwenden Ist ein solcher Bedarf vorhanden, können wir übergeben, dass @ViewChild die untergeordnete Komponente in die übergeordnete Komponente einfügt ;

5. Verwenden Sie Shared Services, um die Kommunikation zwischen beliebigen Komponenten zu implementieren.

Um die Kommunikation zwischen beliebigen Komponenten zu erreichen, können wir das BehaviorSubject-Objekt in Rxjs kombinieren, um einen Shared Service zu erstellen Dieser Blog

blog.tcs-y.com/2019/10 /08/…

Erstellen Sie dataService.ts

getChildParam(value: boolean): void {
    console.log(value); // true
}

Injizieren Sie den Dienst in den Konstruktor von Komponente 1 und legen Sie Daten fest

child1.component.ts

address = 'Shanghai';
setAddress(address: string): void {
    this.address = address;
}

child1.component.html

<app-child-1 [age]="age" [name]="name" (voted)="getChildParam($event)" #child1Component></app-child-1>
<div>{{child1Component.address}}</div>
<button (click)="child1Component.setAddress(&#39;Beijing&#39;)">Click</button>

Im Konstruktor von Komponente 2 den Dienst in Daten einbinden und abonnieren

child2.component.ts

@ViewChild(Child1Component) private child1Component!: Child1Component;

Weitere programmierbezogene Kenntnisse finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über 5 Kommunikationsmethoden zwischen Angular-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!