Angular2 - コンポーネント間でデータ/変更を共有する方法

Question

ツールバー、サイドバー、グリッドがあるインターフェイスがあるとします。ツールバーにはドロップダウンがあり、ユーザーが変更すると、サイドバーのコンテンツとグリッドが変更されます。 Angular 1に戻って、サービスを使用してすべての動的データを取得します。サービスが変更されると、そのサービスを使用するすべてのコンポーネントも更新されます。

角度2では、人々がさまざまな方法を使用しているように見えます。私はあなたの入力を優先する方法を得たいと思っていました。

---

が更新

入力と出力

• 静的サービス
• OnChanges - 03/09/16

  最善の解決策のように見えるが、スレッドつまりティエリTemplier投稿：Delegation: EventEmitter or Observable in Angular2

  コンポーネント間で共有されている各データ項目に対して新しいサービスを作成するのがベストプラクティスである場合、またはすべての共有データを格納するオブジェクトを持つサービスを1つだけ持つことができます。

  See Plnkr for code 
  

  Original Plunker - オブジェクト内のすべてのデータを保存する唯一のサービス - 各変更は、独自のサービス

  Revised Plunker for example ています。その型に基づいて何かを行う必要があるかどうかを調べるために、型が各リスナーに渡されます。

Answer 1

あなたは、このための共有サービスを利用することができます。それは、データが更新されたときに通知を受けるために購読するためのデータとオブザーバブルの両方を含むことができます。

• サービス

  export class ListService { 
      list1Event: EventEmitter<any> = new EventEmitter(); 
  
      getLists() { 
      return this.http.get(url).map(res => res.json()) 
       .subscribe(
       (data) => { 
        this.list1Event.emit(data.list1); 
       } 
      ); 
      } 
  } 
  

• コンポーネント

  @Component({ 
      selector: 'my-component1', 
      template: ` 
      <ul> 
      <li *ngFor="#item of list">{{item.name}}</li> 
      </ul> 
      ` 
  }) 
  export class MyComponent1 { 
      constructor(private service:ListService) { 
      this.service.list1Event.subscribe(data => { 
       this.list = data; 
      }); 
      } 
  } 
  

• ブートストラップ

  bootstrap(AppComponent, [ ListService ]); 
  

詳細については、この質問を参照してください：

• Delegation: EventEmitter or Observable in Angular2
• Delegation: EventEmitter or Observable in Angular2
• Is possible to have two template for single call service in AngularJS 2

Answer 2

私の場合、私はサービスを利用します。サービスは、そのデータを他のコンポーネントと通信するために使用されます。あるコンポーネントがこのデータをサービスに更新し、別のコンポーネントがそのデータを読み取ることができます。または、両方のコンポーネントがそれから読み取ることができ、サーバー自体が「外の世界」からデータを取得します。

inputを使用して、親から子へのデータを渡します。outputを使用して、子から親にイベントを出力します。

あなたは何かがコンポーネント自体に変更したときに何かをするngOnChangesを使用しますが、私はそのためget()とset()機能を使用することを好みます。

少なくとも、それはそれが私の感想です:)