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

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

Angular 2 で兄弟コンポーネント間のデータ フローを管理する場合、考慮すべきアプローチがいくつかあります。

依存関係注入による共有サービス

Angular 2 RC4 で推奨されるソリューションは、依存関係注入を介して共有サービスを利用することです。実装は次のとおりです:

shared.service.ts:

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

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

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

parent.component.ts (親コンポーネント):

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

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 (子兄弟コンポーネント):

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 = '';
  }
}

重要な考慮事項:

1. 共有サービス プロバイダーは、子コンポーネントではなく、親コンポーネントでのみ指定する必要があります。
2. 子コンポーネントは引き続きサービスを挿入してインポートする必要があります。
3. 以前の Angular 2 ベータ版から変更する場合は、インポート ステートメントのみを更新します。

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