angular2入門【コンポーネント編②】

ゼットンです。
前回は自動生成されたソースを見ながら
Componentについて説明しました。
今回はここに新たなコンポーネントを追加してみます。

Componentの追加

src>appフォルダにchild.component.tsというファイルを
追加します。
中身は下記のようにします。

タグ名はapp-childとします。
名前はなんでもいいですが、
独自定義のタグはapp-xxにするとか
ルールを設けとくと標準のタグと
すぐに見分けがついていいと思います。
そんで、変数titleにchild component!という
文字列を格納します。

ではでは、このChildコンポーネントを
前回説明したapp-rootの中で使いたいと思います。

というわけで、
app-rootに下記の実装を追加。

import文で先ほどのchildコンポーネントを読み込みます。
ここはファイル名で指定します。
そんで、タグ名をHTML部分に書いてあげてます。
つまり、ファイルを読み込み、タグ名で呼び出しているというわけ。
なんとなく動きそうな気がします！
ng serveコマンドを打って、
http://localhost:4200にアクセスしてみましょう。

おやぁ？

ゆう〜〜〜
大丈夫だよ〜〜〜
こういうときはブラウザ上でF12を
押すんだよ〜〜〜

こうすると開発者モードに移行し、
デバッグコンソールが見れます。
おや、なんかエラーが出てますね。なになに

それな！
いや、でもここは避けて通れないから
頑張ろう。
とりあえず最初の3行だけでも・・・。

んー、テンプレートエラー？
HTML部分でエラー？
app-childなんて知らないって？？
お、頑張れば読めるぞ！NEW HORIZONレベルの英語だ！
app-childがangularのコンポーネントなら
このモジュールの一部かどうか確かめなさい。

モジュールってなんぞ・・・？

実は新たに追加したコンポーネントを使うためには、
モジュールに追加する必要があるんです。

モジュールとは、複数のコンポーネントを束ねる役割をします。
正しくはコンポーネントだけでなく、
パイプやサービス、ディレクティブなどもそうですし、
モジュールの中にモジュールを含めることもできます。
あらゆる部品をパッケージ化する単位という感じ。

そのモジュールというのがここでいうと
app.module.tsです。
とりあえずファイルを開けてみます。

いろいろ書いてありますが、
要はモジュールに含めるものを定義してます。
内訳はこんな感じ。

ここの詳しい説明はおいおいします。
というわけで、
これにchildコンポーネントを追加すべく、
次のような実装を加えます。

新たにコンポーネントを追加するので、
ファイルを読み込んでdeclarationsに追加するわけです。
これでブラウザを見てみるとー

いけました！

こんな感じで、新たに追加したものを使いたい場合は
同一のモジュールに含めてあげることをお忘れなく！

次回はパイプを扱ってみます。
ではでは。