Wie können Geschwisterkomponenten in Angular 2 kommunizieren?

Angular 2-Komponentenkommunikation zwischen Geschwistern

In Angular 2 kann die Geschwisterkomponentenkommunikation durch Abhängigkeitsinjektion und gemeinsame Dienste erreicht werden.

Shared-Service-Ansatz (Angular 2 RC4 und Später)

Der empfohlene Ansatz besteht darin, einen gemeinsamen Dienst zu erstellen, auf den Geschwisterkomponenten über Abhängigkeitsinjektion zugreifen können. Hier ist ein Beispiel:

// shared.service.ts
@Injectable()
export class SharedService {
  dataArray: string[] = [];

  insertData(data: string) {
    this.dataArray.unshift(data);
  }
}

Übergeordnete Komponente:

// parent.component.ts
@Component({
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent { }

Geschwisterkomponenten:

// child.component.ts
constructor(private _sharedService: SharedService) { }
ngOnInit(): void {
  this.data = this._sharedService.dataArray;
}

// child-sibling.component.ts
constructor(private _sharedService: SharedService) {}
addData() {
  this._sharedService.insertData(this.data);
  this.data = '';
}

Vorteile davon Methode:

• Einfach zu implementieren
• Unterstützt die direkte Kommunikation zwischen Geschwisterkomponenten ohne die Notwendigkeit eines Ereignisemitters oder $rootScope.$broadcast
• Ermöglicht Teilen von Daten zwischen mehreren Komponenten

Hinweis:

• Stellen Sie den Dienst nur in der übergeordneten Komponente bereit, importieren Sie ihn jedoch in beide untergeordneten Komponenten.

Das obige ist der detaillierte Inhalt vonWie können Geschwisterkomponenten in Angular 2 kommunizieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!