angular - Angular のコンポーネント間で通信する方法は?

Question

私は Web アプリ プロジェクトに取り組んでおり、Angular を使用しようとしています。コンポーネントの通信に問題があります。たとえば、親コンポーネントが子コンポーネントとデータを交換する方法、兄弟コンポーネント間で通信する方法などです。

Answer 1

サービスの使用:

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

@Injectable()
export class AppState {
  public _subject = new Subject<object>();
  public event = this._subject.asObservable();

  public publish(data: any) {
    this._subject.next(data);
  }
}

そして、次のようなイベントのようなメッセージを公開できます:

export class AppComponent {
  constructor(
    public appState: AppState
  ) {
    appState.publish({data: 'some data'});
  }
}

これらのイベントをサブスクライブできます。

export class HomeComponent {
  constructor(
    public appState: AppState
  ) {
    appState.event.subscribe((data) => {
      console.log(data); // {data: 'some data'}
    });
  }
}

Answer 2

1. @入出力

   マルチパート コンポーネントがある場合は、@Input と @Output を使用してデータを交換できます。ドキュメント: https://angular.io/guide/component-interaction

   例: https://angular.io/generated/live-examples/component-interaction/eplnkr.html

2. 依存性注入

   データをサービスに保存してから、必要なコンポーネントにサービスを注入できます。例の「user.server.ts」など:

   https://angular.io/generated/live-examples/dependency-injection/eplkr.html

Answer 3

依存性注入を使用する必要があります。ここに小さな例があります: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js