コンポーネントの基本コードを理解する (3/6)

さて、スクリプトがわかったら、残るはHTMLとCSSです。app.component.htmlがどうなっているか見てみましょう。これは、割と単純です。

<h1>
    {{title}}
</h1>

<h1>タグを出力しているだけですね。そのコンテンツには、{{title}}というものが書かれています。この{{}}という記号は、JavaScriptの文を記述してその結果を出力させるのに使います。

ここでは、titleという値を出力しています。これは、先にスクリプト側でexport classする際に用意した変数です。スクリプト側に用意した変数が、テンプレート側でこのように利用できるようになっているのです。

残るスタイルシート（app.component.css）は、開いてみるとわかりますが、中身は空っぽです。ここに必要に応じてスタイルを書いてください、というわけですね。



これで、コンポーネントの基本的な仕組みがわかりました。では、ちょっとした応用として、コンポネントの表示を少し変更してみましょう。

下に、app.component.htmlとapp.component.cssのサンプルをあげておきました。このように書き換えて再度アプリケーションを表示してみましょう。今度は四角い枠の中にタイトルとメッセージが表示されます。

ここでは、app.component.cssにrectクラスを定義しておき、これをapp.component.html側で<div class="rect">というように指定して利用しています。このように、HTMLとスタイルシートを書き換えるだけで、簡単にコンポーネントの表示をカスタマイズできます。

ところで、HTMLファイルのテンプレートには、app.component.cssを読み込むためのタグなどがないことを不思議に思った人もいるかもしれません。これは、app.component.tsのスクリプトで設定しているのです。この@Componentアノテーションで、

styleUrls: ['app.component.css']

このように指定したのを思い出してください。これで、スタイルシートが読み込まれて起用されるようになっていたのですね。ですからスタイルシートを読み込むためのタグなどは不要なのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※app.component.html

<div class="rect">
    <h1>AppComponent</h1>
    <p>{{'これは、 "' + title + '" というコンポーネントです。'}}</p>
</div>

※app.component.css

.rect {
    border: 1px solid lightgray;
    padding: 10px 5px;
    margin: 10px 5px;
    color: darkgray;
}