Angular 2 では兄弟コンポーネントはどのように通信できますか?

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

Angular 2 では、依存関係注入と共有サービスを通じて兄弟コンポーネントの通信を実現できます。

共有サービスアプローチ (Angular 2 RC4 および後ほど)

推奨されるアプローチには、兄弟コンポーネントが依存関係注入を通じてアクセスできる共有サービスを作成することが含まれます。以下に例を示します。

// shared.service.ts
@Injectable()
export class SharedService {
  dataArray: string[] = [];

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

親コンポーネント:

// parent.component.ts
@Component({
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent { }

兄弟コンポーネント:

// child.component.ts
constructor(private _sharedService: SharedService) { }
ngOnInit(): void {
  this.data = this._sharedService.dataArray;
}

// child-sibling.component.ts
constructor(private _sharedService: SharedService) {}
addData() {
  this._sharedService.insertData(this.data);
  this.data = '';
}

これによる利点メソッド:

• 実装が簡単
• イベント エミッターや $rootScope.$broadcast を必要とせずに、兄弟コンポーネント間の直接通信をサポートします
• 複数間でのデータ共有コンポーネント

注:

• サービスは親コンポーネントでのみ提供しますが、両方の子コンポーネントにインポートします。

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