リストを加える」の作例をさらに手直しします。いっても、見た目や動きは変わりません。コンポーネントを分け、クラスもひとつモジュールに切り出します。開発が進んで規模が大きくなったときに管理しやすくし、コンポーネントの使い回しもできるようになります。リストを加える」で書いたコード002のコンポーネントのモジュール(app.component)は、コンポーネントのクラス(AppComponent)だけでなく、その中で扱うオブジェクトのクラス(Heroine)も含んでいます。このクラスを以下のように新たなモジュール(heroine)に分け、「app」フォルダに納めましょう。string;}そうすると、コンポーネントのモジュール(app.component.ts)は、つぎのように別モジュール(heroine)に分けたクラス(Heroine)をimportしなければなりません。リストを加える」で書いたコード002と変わりなく動くはずです(図001)。コンポーネントをふたつのモジュールに分けるつぎに、コンポーネント(app.component)のモジュールから新たにモジュールを切り分けましょう。リストの項目をクリックしたとき下に示される、つぎの詳細情報の部分です。{}新たなモジュール(heroine-detail.component)は、つぎのようにクラス(HeroineDetailComponent)を定めます。デコレータの関数(@Component)には、セレクタ(selectorプロパティ)を与え、テンプレート(templateプロパティ)は前掲の親の記述を少し書き替えてあります。リストから選ばれた項目(selectedHeroine)は、親のコンポーネント(app.component)のプロパティなので、そのまま参照できないからです。前項でモジュールを分けたクラス(Heroine)は、このコンポーネントでも用いています。複数のモジュールで使うクラスは、このように分けておくと便利です。importしたデコレータ関数のInputについては、あとでご説明します。Heroine;}もとのコンポーネント(app.component)のテンプレート(templateプロパティ)は、詳細情報の部分をつぎのように子コンポーネント(heroine-detail.component)のセレクタ(my-heroine-detail)に差し替えます。選ばれた項目(selectedHeroine)は、角かっこ[]で参照する子コンポーネントのプロパティ(heroine)に与えています。{}このとき、子コンポーネント(heroine-detail.component)は、渡された値をプロパティ(heroine)が受け取る(バインディング)と示しておかなければなりません。Directives」参照)。アプリケーションのモジュールに詳細情報のコンポーネントを加えるそして、新しく切り分けた詳細情報のモジュール(heroine-detail.component)は、アプリケーションのモジュール(app.module)につぎのように定めます。詳細情報のクラス(HeroineDetailComponent)をimportし、デコレータ関数(@NgModule)に渡すオブジェクトのdeclarationsプロパティに配列要素として加えます。リストを加える」で書いたコードと同じ動きになります。クラスやコンポーネントをモジュールに分けましたので、テストや拡張、使い回しなどがしやすくなりました。書き直した4つのモジュールは、つぎのコード001にまとめてあります。併せて、Plunkerに作例のコードを掲げました。