Wie kann ich zwischen Geschwisterkomponenten in Angular 2 kommunizieren?

Angular 2 Geschwisterkomponentenkommunikation

Geschwisterkomponenten haben keinen Zugriff auf die Eigenschaften und Methoden der anderen. In diesem Artikel wird ein unkomplizierter Mechanismus für die Kommunikation zwischen Geschwisterkomponenten in Angular 2 unter Verwendung eines gemeinsamen Dienstes untersucht.

Shared-Service-Ansatz

1. Gemeinsamer Dienst:

Erstellen Sie einen gemeinsam genutzten Dienst, der als Kommunikationsdrehscheibe fungiert.

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

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

2. Übergeordnete Komponente:

Importieren und Bereitstellen des gemeinsamen Dienstes in der übergeordneten Komponente.

import {SharedService} from './shared.service';
@Component({
    selector: 'parent-component',
    template: `<child-component></child-component>
               <child-sibling-component></child-sibling-component>`,
    providers: [SharedService]
})
export class ParentComponent { }

3. Untergeordnete Komponenten:

Injizieren Sie den gemeinsamen Dienst in beide Geschwisterkomponenten:

Untergeordnete Komponente 1:

import {SharedService} from './shared.service'
@Component({
    selector: 'child-component',
    template: `...`
})
export class ChildComponent implements OnInit {
    data: string[] = [];
    constructor(private _sharedService: SharedService) { }
}

Kind Komponente 2 (Geschwister):

import {SharedService} from './shared.service'
@Component({
    selector: 'child-sibling-component',
    template: `...`
})
export class ChildSiblingComponent {
    data: string = 'Testing data';
    constructor(private _sharedService: SharedService) { }
}

4. Datenfreigabe:

Die Geschwisterkomponente kann das Datenarray des gemeinsam genutzten Dienstes ändern, was sich in der anderen Geschwisterkomponente widerspiegelt.

addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
}

Hinweise:

• Fügen Sie den Shared Service Provider nur in die übergeordnete Komponente ein, um die Erstellung mehrerer zu vermeiden Instanzen.
• Importieren und injizieren Sie den Dienst in die Geschwisterkomponenten.
• Aktualisieren Sie die Importanweisungen für Angular 2-Versionen höher als Beta.

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