Angular兄弟组件間の値の渡しかた
Angularでは、兄弟コンポーネント間で値を受け渡す際に次の方法が利用できます:
- 親コンポーネントのサービスの共有 : 共通サービスを作成し、親コンポーネントに注入します。すると兄弟コンポーネントからそのサービスを利用してデータの受け渡しを行うことができます。片方の兄弟コンポーネントでその変数に値を保存しておき、もう片方の兄弟コンポーネントからその変数を参照します。
- 兄弟コンポーネントでは、@Input() デコレータを用いて、受け取る値を入力プロパティとして宣言する。そして、もう一方の兄弟コンポーネントでは、その値をプロパティとしてターゲットコンポーネントのテンプレートにバインドする。
- 親コンポーネントで、@ViewChild()デコレータを使用して兄弟コンポーネントを参照し、そのコンポーネントの公開プロパティやメソッドに直接アクセスする。
- イベントと @Output() デコレータを使用:兄弟コンポーネントの 1 つに @Output() デコレータを使ってイベントを定義し、そのイベント経由で親子コンポーネント間で値のやりとりを可能にする。もう一方の兄弟コンポーネントではそのイベントをサブスクライブし、受け取った値を目的のコンポーネントに渡す。
あなたの特定の必要性に基づいて、値を渡すのに適した方法を選択するための一般的な方法を以下に示します。