Eine kurze Analyse der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten in Angular

Wie kommuniziere ich zwischen Nicht-Eltern-Kind-Komponenten in Angular? In diesem Artikel erfahren Sie, wie AngularNicht-Eltern-Kind-Komponenten über Dienste kommunizieren. Ich hoffe, er ist hilfreich für Sie!

Tatsächlich sind wir mit der Übergabe von Werten zwischen übergeordneten und untergeordneten Komponenten bestens vertraut und kommen im Geschäftsimplementierungsprozess sehr häufig vor.

Aber mein Implementierungsprozess umfasst eine Ebenenübergreifende Übertragung (d. h. eine Wertübertragung zwischen nicht-übergeordneten und untergeordneten Komponenten). Ja, ich kann ihn Schicht für Schicht weitergeben und den übergebenen Wert der untergeordneten Komponente in der übergeordneten Komponente erhalten Gibt es einen besseren Weg? [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Anforderungshintergrund:

hat eine Unterkomponente, die als Komponente der dritten Ebene verstanden werden kann. In dieser Komponente gibt es ein Dropdown-Feld Wenn auf ein bestimmtes Li-Tag geklickt wird, muss der entsprechende ausgewählte Wert an die Komponente der ersten Ebene übergeben werden. Gleichzeitig fordert die Komponente der ersten Ebene die Listenschnittstelle mit dem empfangenen Wert an und aktualisiert dann die Daten.

Ursprüngliche Idee:

Damals dachte ich darüber nach, den vom Benutzer ausgewählten Wert über localstorage zu speichern und ihn dann über localstorage in der verwendeten Komponente herauszunehmen und die Schnittstelle mit dem Wert anzufordern , es konnte nicht in Echtzeit durchgeführt werden, nachdem der Benutzer es ausgewählt hatte, veranlasste es mich nicht, Daten in der übergeordneten Komponente abzurufen. Das heißt, wenn sich der Wert in der untergeordneten Komponente ändert, wie kann ich die übergeordnete Komponente benachrichtigen?

Technische Punkte:

Angular-Elternkomponente und untergeordnete Komponenten kommunizieren über Dienste

Die übergeordnete Komponente und ihre untergeordneten Komponenten 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.

Prinzip

Die übergeordnete Komponente und ihre untergeordneten Komponenten nutzen denselben Dienst, und dieser Dienst wird verwendet, 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. Dienste sind die Brücke zwischen untergeordneten und übergeordneten Komponenten, da Dienste problemlos in andere Komponenten eingefügt werden können und weil das Subject-Objekt Daten an Komponenten senden (übertragen) kann, die dieses Objekt abonnieren, sodass dies in Kombination mit Angular Service und Subject in Rxjs möglich ist Datenkommunikation zwischen Komponenten einfach realisieren.

Implementierung:

Erstellen Sie eine Servicedatei in der Unterkomponente. Der Code lautet wie folgt:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderActionService {
  public pageTenantMode = new Subject<string>();
  // 获得一个Observable;
  missionConfirmed$ = this.pageTenantMode.asObservable();
  constructor() {}

  setParams(params) {
    this.pageTenantMode.next(params);
  }
}

Die Datenschicht der Unterkomponente ruft die obige Methode auf und übergibt den Wert.

this.tenantModeService.setParams（）

Injizieren Sie den oben genannten Dienst dort, wo die übergeordnete Komponente ihn aufruft. Der Code lautet wie folgt:

    headerModeService.missionConfirmed$.subscribe(
        () => {
          this.mode = headerModeService.pageTenantMode;
          this.initTableData();
        }
      );

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!