Wie implementiert man die Kommunikation zwischen Geschwisterkomponenten in Angular 2?

Geschwisterkomponentenkommunikation in Angular 2

Bei der Verwaltung des Datenflusses zwischen Geschwisterkomponenten in Angular 2 sind mehrere Ansätze zu berücksichtigen.

Gemeinsamer Dienst mit Abhängigkeitsinjektion

Die empfohlene Lösung in Angular 2 RC4 besteht darin, einen gemeinsam genutzten Dienst über Abhängigkeitsinjektion zu nutzen. Hier ist die Implementierung:

shared.service.ts:

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

@Injectable()
export class SharedService {
  dataArray: string[] = [];

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

parent.component.ts (Übergeordnete Komponente):

import {Component} from '@angular/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';

@Component({
  selector: 'parent-component',
  template: `<h1 >Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>`,
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent],
})
export class ParentComponent {} 

child.component.ts (Untergeordnete Komponente):

import {Component, OnInit} from '@angular/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-component',
  template: `<h1 >I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>`
})
export class ChildComponent implements OnInit {
  data: string[] = [];
  constructor(private _sharedService: SharedService) { }
  ngOnInit(): any { this.data = this._sharedService.dataArray; }
}

child-sibling.component.ts (Untergeordnete Geschwisterkomponente):

import {Component} from 'angular2/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-sibling-component',
  template: `
          <h1 >I am a child</h1>
          <input type="text" [(ngModel)]="data"/>
          <button (click)="addData()"></button>`
})
export class ChildSiblingComponent {
  data: string = 'Testing data';
  constructor(private _sharedService: SharedService) {}
  addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
  }
}

Wichtige Überlegungen:

1. Der Shared-Service-Provider sollte nur in der übergeordneten Komponente angegeben werden, nicht in den untergeordneten Komponenten.
2. Untergeordnete Komponenten müssen den Dienst noch injizieren und importieren.
3. Bei Änderungen von einer früheren Angular 2-Betaversion aktualisieren Sie nur Importanweisungen.

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