[解決済み] Angular 2のコンポーネント間でデータを共有するにはどうすればよいですか？

質問

Angular 1.x.xでは、単純に同じサービスを要求すると同じインスタンスになり、サービス内のデータを共有することが可能です。

Angular 2では、私のサービスへの参照を持つコンポーネントがあります。サービス内のデータを読み、修正することができ、それは良いことです。別のコンポーネントに同じサービスを注入しようとすると、まるで新しいインスタンスを取得したかのように見えます。

私は何を間違えているのでしょうか？パターン自体が間違っているのか（データを共有するためにサービスを使用する）、それともサービスをシングルトン（アプリの1つのインスタンス内）としてマークする必要があるのか、それとも何か？

私は 2.0.0-alpha.27/ をする

を通してサービスをインジェクトしています。 appInjector (編集: 現在 providers ) の中に @Component アノテーションを作成し、コンストラクタで参照を保存します。これはコンポーネント内でローカルに動作しますが、私が考えていたように、コンポーネント間で動作しません（同じサービスインスタンスを共有しません）。

アップデイト : Angular 2.0.0から@ngModuleが追加されました。 providers プロパティでサービスを定義します。 @ngModule . これにより、そのモジュール内の各コンポーネントやサービスなどに、そのサービスの同じインスタンスが渡されるようになります。 https://angular.io/docs/ts/latest/guide/ngmodule.html#providers

アップデイト : AngularやFE開発全般に言えることですが、色々なことがありました。@noririco さんがおっしゃるように、NgRxのような状態管理システムを使うのも手です。 https://ngrx.io/

どのように解決するのですか？

サービスのシングルトンは良い解決策です。他の方法 - data/events bindings .

両者の例です。

class BazService{
  n: number = 0;
  inc(){
    this.n++;
  }
}

@Component({
  selector: 'foo'
})
@View({
  template: `<button (click)="foobaz.inc()">Foo {{ foobaz.n }}</button>`
})
class FooComponent{
  constructor(foobaz: BazService){
    this.foobaz = foobaz;
  }
}

@Component({
  selector: 'bar',
  properties: ['prop']
})
@View({
  template: `<button (click)="barbaz.inc()">Bar {{ barbaz.n }}, Foo {{ prop.foobaz.n }}</button>`
})
class BarComponent{
  constructor(barbaz: BazService){
    this.barbaz = barbaz;
  }
}

@Component({
    selector: 'app',
    viewInjector: [BazService]
})
@View({
  template: `
    <foo #f></foo>
    <bar [prop]="f"></bar>
  `,
  directives: [FooComponent, BarComponent]
})
class AppComponent{}

bootstrap(AppComponent);

ライブを見る