Angular 2 の兄弟コンポーネント間で通信するにはどうすればよいですか?

Angular 2 兄弟コンポーネントの通信

兄弟コンポーネントは、互いのプロパティやメソッドにアクセスできません。この記事では、共有サービスを利用した、Angular 2 の兄弟コンポーネント間の通信のための簡単なメカニズムについて説明します。

共有サービス アプローチ

1.共有サービス:

通信ハブとして機能する共有サービスを作成します。

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

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

2.親コンポーネント:

親コンポーネントに共有サービスをインポートして提供します。

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.子コンポーネント:

両方の兄弟コンポーネントに共有サービスを挿入します:

子コンポーネント 1:

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

子コンポーネント 2 (兄弟):

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

4.データ共有:

兄弟コンポーネントは共有サービスのデータ配列を変更でき、これは他の兄弟コンポーネントに反映されます。

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

注:

• 複数のインスタンスの作成を避けるために、共有サービス プロバイダーを親コンポーネントにのみ含めます。
• サービスを兄弟コンポーネントにインポートして挿入します。
• インポートを更新しますベータ版よりも上位の Angular 2 バージョンのステートメント。

以上がAngular 2 の兄弟コンポーネント間で通信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。