Heim > Web-Frontend > js-Tutorial > Wie kann ich zwischen Geschwisterkomponenten in Angular 2 kommunizieren?

Wie kann ich zwischen Geschwisterkomponenten in Angular 2 kommunizieren?

Linda Hamilton
Freigeben: 2024-11-14 13:40:02
Original
360 Leute haben es durchsucht

How Can I Communicate Between Sibling Components in Angular 2?

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);
    }
}
Nach dem Login kopieren

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 { }
Nach dem Login kopieren

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) { }
}
Nach dem Login kopieren

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) { }
}
Nach dem Login kopieren

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 = '';
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage