Eine kurze Diskussion über die Interaktionsmethoden von Angular-Komponenten

In diesem Artikel erfahren Sie mehr über die Interaktionsmethoden 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.

Empfohlene verwandte Tutorials: „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 lauten wie folgt:

---

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

Überwachen Sie Änderungen in den Eingabeattributwerten.

(1) Verwenden Sie die Setter-Methode.

Verwenden Sie die setter()-Methode eines Eingabeattributs hat die Wertänderungen in der übergeordneten Komponente abgefangen und Maßnahmen ergriffen.

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 Attributsetzer-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-Klasse

Der 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.

---

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo

! ! 🎜

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