Detaillierte Erläuterung der Komponenteninteraktion in Angular

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Interaktion von Angular-Komponenten. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Winkelkomponenteninteraktion

Komponenteninteraktion: Komponentenkommunikation ermöglicht es zwei oder mehr Komponenten, Informationen auszutauschen.
Verwendungsszenarien: Wenn eine bestimmte Funktion in mehreren Komponenten verwendet wird, kann die spezifische Funktion in einer Unterkomponente gekapselt werden und bestimmte Aufgaben oder Arbeitsabläufe können in der Unterkomponente verarbeitet werden.
Interaktionsmethoden:

• Methode 1: Interagieren Sie über die Dekoratoren @Input und @Output. @Input和@Output装饰器进行交互。
• 方式2：通过服务
Methode 2: Interaktion über service.

【Verwandte Empfehlung: „angular Tutorial

“】

---

Übertragen Sie Daten von der übergeordneten Komponente zur untergeordneten Komponente

Übertragen Sie Daten von der übergeordneten Komponente zur untergeordneten Komponente durch Eingabebindung.
Die Eingabeeigenschaft ist eine einstellbare Eigenschaft mit dem @Input-Dekorator.

Bei der Bindung per Property-Bindung „fließt“ der Wert in die Property.

Einige Codebeispiele sind wie folgt:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-selector',
  template: `
    // 模板代码
  `
})
export class TestComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

Das obige Beispiel enthält zwei Eingabeattribute. Das zweite @Input gibt einen Alias-Master für den Attributnamen masterName der Unterkomponente an.

Referenzieren Sie die untergeordnete Komponente in der übergeordneten Komponente. Einige Codebeispiele sind wie folgt:

---

    <app-hero-child *ngFor="let hero of heroes"
      [hero] = "hero"
      [master] = "master">
    </app-hero-child>

Überwachen Sie Änderungen in Eingabeattributwerten.

(1) Verwenden Sie die Setter-Methode , der in der übergeordneten Komponente abgefangen wurde. Der Wert ändert sich und es wird eine Aktion ausgeführt.

Einige Codebeispiele lauten wie folgt:

export class TestComponent {
	
	@Input()
	set name(name: String) {
		// 逻辑处理
	}
}

(2) Verwenden Sie die ngOnChanges()-Methode.

Verwenden Sie die ngOnChanges()-Methode der OnChanges-Lebenszyklus-Hook-Schnittstelle, um auf Änderungen in Eingabeattributwerten zu warten und zu reagieren.

Hinweis: Wenn mehrere interaktive Eingabeattribute überwacht werden müssen, ist diese Methode besser geeignet als die Verwendung der Attributsetter-Methode.

Import Input, OnChanges und SimpleChange von @angular/core in der untergeordneten Komponente

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';

@Component({
  selector: 'app-version-child',
  template: `
  // 模板代码
  `
})
export class ChildComponent implements OnChanges {
  @Input() major: number;
  @Input() minor: number;

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    for (let propName in changes) {
      // propName为输入属性的名字
      let changedProp = changes[propName]; // changedProp为SimpleChange对象
      // 其它代码
    }
  }
}

SimpleChange-KlasseDer Quellcode lautet wie folgt:

/**
 * Represents a basic change from a previous to a new value for a single
 * property on a directive instance. Passed as a value in a
 * {@link SimpleChanges} object to the `ngOnChanges` hook.
 *
 * @see `OnChanges`
 *
 * @publicApi
 */
export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

---

Die übergeordnete Komponente lauscht auf die Ereignisse der untergeordneten Komponente

Die untergeordnete Komponente stellt ein EventEmitter-Attribut bereit. Wenn ein Ereignis auftritt, verwendet die untergeordnete Komponente diese Eigenschaft, um das Ereignis (nach oben) auszusenden. Die übergeordnete Komponente bindet an diese Ereigniseigenschaft und reagiert, wenn das Ereignis auftritt.

Die EventEmitter-Eigenschaft einer untergeordneten Komponente ist eine Ausgabeeigenschaft, normalerweise mit einem @Output-Dekorator.

——Interaktion zwischen Angular-Komponenten

---

Übergeordnete Komponente und untergeordnete Komponente kommunizieren über Dienste

Übergeordnete Komponente und ihre untergeordnete Komponente nutzen denselben Dienst und nutzen diesen Dienst, um eine bidirektionale Kommunikation innerhalb der Komponentenfamilie zu erreichen.

Der Umfang dieser Dienstinstanz ist auf die übergeordnete Komponente und ihre untergeordneten Komponenten beschränkt. Komponenten außerhalb dieses Komponentenunterbaums können nicht auf den Dienst zugreifen oder mit ihnen kommunizieren.

---

Detaillierte Dokumentation

Eine ausführliche Dokumentation finden Sie in den relevanten Teilen von

Winkelkomponenteninteraktion

Weitere programmierbezogene Kenntnisse finden Sie unter:

Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Komponenteninteraktion in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!