Heim >Web-Frontend >js-Tutorial >Wie kann die Kommunikation zwischen Geschwisterkomponenten in Angular 2 erleichtert werden?

Wie kann die Kommunikation zwischen Geschwisterkomponenten in Angular 2 erleichtert werden?

Barbara Streisand
Barbara StreisandOriginal
2024-11-13 08:55:02688Durchsuche

How to Facilitate Communication Between Sibling Components in Angular 2?

Kommunikation von Geschwisterkomponenten in Angular 2

Bei der Arbeit mit Komponenten, die Geschwister sind, kann es notwendig sein, Informationen zwischen ihnen zu kommunizieren. Es gibt mehrere Möglichkeiten, dies mit Angular 2 anzugehen, einschließlich der Verwendung eines Ereignisemitters und @Input, der Nutzung eines gemeinsamen Dienstes mit beobachtbaren Abonnements oder der Nutzung des hierarchischen Abhängigkeitsinjektionssystems.

Event Emitter und @Input

Eine Möglichkeit besteht darin, Ereignisemitter zu verwenden, um Daten an eine übergeordnete Komponente weiterzuleiten, und dann @Input-Dekoratoren für die Detailkomponente zu verwenden, um die Daten zu empfangen. Dieser Ansatz ist jedoch möglicherweise weniger wünschenswert, wenn bei der Elementauswahl zusätzlicher Code ausgeführt werden muss.

Gemeinsamer Dienst mit beobachtbaren Abonnements

Eine andere Methode besteht darin, einen gemeinsam genutzten Dienst zu erstellen, der beobachtbare Abonnements bereitstellt. Wenn auf ein Element geklickt wird, kann der gemeinsam genutzte Dienst aktualisiert werden, wodurch die erforderlichen Aktualisierungen in gleichgeordneten Komponenten ausgelöst werden. Dieser Ansatz ermöglicht mehr Flexibilität und Kontrolle über den Kommunikationsprozess.

Abhängigkeitsinjektion in der übergeordneten Komponente

Aktualisiert für Angular rc.4:

Für Eine einfachere Lösung wäre die Verwendung des hierarchischen Abhängigkeitsinjektionssystems von Angular 2. Durch die Bereitstellung des gemeinsam genutzten Dienstes in der übergeordneten Komponente haben beide untergeordneten Komponenten über ihre Konstruktoren Zugriff darauf. Dies ermöglicht eine direkte Kommunikation zwischen den Geschwistern und bietet eine saubere und effiziente Methode für den Datenaustausch.

Um diesen Ansatz zu veranschaulichen:

  • Erstellen Sie einen SharedService, der die zu teilenden Daten enthält.
  • In der übergeordneten Komponente den SharedService als Anbieter einbinden und in den Konstruktor einfügen.
  • In den Geschwisterkomponenten den SharedService importieren und in den Konstruktor einfügen.
  • Ändern Sie die untergeordnete Komponente, um nach Bedarf auf die freigegebenen Daten zuzugreifen und diese zu bearbeiten.

Das obige ist der detaillierte Inhalt vonWie kann die Kommunikation zwischen Geschwisterkomponenten in Angular 2 erleichtert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn