TIPS:Angularで親コンポーネントから子コンポーネントに値を引き渡すには?(@Input)@Inputデコレーターを使って、親コンポーネントから子コンポーネントに情報を引き渡すことで、マスター/詳細画面を作成する方法を解説。v5時点で執筆し、v6で動作を確認しました。Angularでは、コンポーネントを組み合わせることで、ページを組み立てていくのが基本です。本連載のこれまでの例では、ページにコンポーネントを1つだけ配置する例を見てきましたが、一般的には、1つの画面に複数のコンポーネントを配置することもできますし、コンポーネント同士を入れ子にすることも可能です。複雑なページでは、(1つのコンポーネントに何でも機能を詰め込むのではなく)機能単位にコンポーネントを分離することで、部品としてのシンプルさを維持できます。本稿では、そのようなコンポーネント連携の方法について解説します。扱うサンプルは、以下の図の通りです。ページ上部に表示された記事タイトルをクリックすると、詳細情報を下部に表示します。記事タイトルをクリックすると、詳細情報を表示サンプルを構成するファイルは、以下の通りです。本サンプルを構成する主なファイルページ全体はAppComponentが担当し、その配下でDetailsArticleComponentコンポーネントが記事情報の詳細表示を担うという役割分担です。記事タイトルをクリックすることで、AppComponent⇒DetailsArticleComponentに記事情報(Articleオブジェクト)を引き渡します。以上の関係を念頭に、ここからは具体的な実装を見ていきます。記事情報を表すArticleクラスコンポーネント間で受け渡しする記事情報は、Articleクラスとして準備しておきます。記事に関わる属性をプロパティとして定義しただけのクラスなので、特段に説明すべき点はありません。コンポーネント側から参照できるよう、exportキーワードを付与するのを忘れないようにしてください。更新日}記事情報を表すためのArticleクラス(article.ts)記事一覧を作成するメインコンポーネントメインコンポーネント(AppComponent)では、記事一覧を生成すると共に、DetailsArticleComponentコンポーネントを呼び出します。[source]="selectedItem"></my-details-article>記事一覧を生成すると共に、子コンポーネントを呼び出すコード(上:app.component.ts/下:app.component.html)記事情報を一覧に整形するのはngForディレクティブの役割です([1])。配下のアンカータグでは、「(click)="onclick(article)」で、イベントハンドラーを設定している点に注目です。これで、記事がクリックされた「その記事情報(変数article)をonclickメソッドに渡しなさい」という意味になります。onclickメソッド([2])では、後でDetailsArticleComponentコンポーネントに引き渡すために、渡された記事情報をselectedItemプロパティに設定しておきます。[3]がDetailsArticleComponentコンポーネントの呼び出しです。Bindingの構文で、DetailsArticleComponentコンポーネントのsourceプロパティに対して、メインコンポーネントのselectedItemプロパティをバインドします。以上をまとめると、記事リンクをクリックすると、選択された記事情報をselectedItemプロパティ経由でDetailsArticleComponentに引き渡す、という流れが出来上がるわけです。記事詳細を表示する子コンポーネント最後に、メインコンポーネントから呼び出され、記事の詳細情報を表示するためのDetailsComponentコンポーネントです(なお、冒頭の表にも示していますが、実際に動作させるためには、内容は空でよいのでdetails-article.component.cssファイルも必要になります)。[href]="source.url">{{source.title}}</a></li><li>著者:{{source.author}}</li><li>ページビュー:{{source.view}}</li><li>更新日:{{source.updated.toLocaleDateString()}}</li></ul></div>記事詳細を表示するコード(上:details-article.component.ts/下:details-article.component.html)ここでポイントとなるのは、太字の部分だけです。コンポーネントの属性として値を受け取るのは@Inputデコレーターの役割です。typeproperty:プロパティ名type:データ型プロパティ定義を@Inputで修飾することで、(この例であれば)sourceプロパティが同名のsource属性として公開されます。後は、テンプレート側でもsourceプロパティ経由で記事情報(Articleオブジェクトのプロパティ)にアクセスできます。コンポーネントをモジュールに登録するコンポーネントを追加した場合には、アプリ側できちんと認識できるように、モジュール側にも追加しておきましょう*1。generateコマンドを利用した場合には、自動的に登録されます。}コンポーネントをモジュールに登録するコード(app.module.ts)以上を理解できたら、サンプルを実行してみましょう。冒頭の図のように、記事リンクをクリックすると、ページ下部に対応する記事の詳細が表示されます。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。