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

では、@Componentアノテーションを見てみましょう。このアノテーションでは、その後の()の引数内にオブジェクトが用意されています。このオブジェクトの中に、コンポーネントに渡す各種の設定情報が記述されます。ここで用意しているのは以下のような項目です。

moduled――モジュール名を指定します。ここでは、module.idという値が指定されています。モジュールのIDをそのままmoduleIdに設定しなさい、ということです。

selector――これは、コンポーネントを識別するための名前です。ここでは「app-root」と指定していますね。これにより、このコンポーネントは「app-root」という名前で識別されるようになります。これがどういうことかというと、<app-root>というタグでこのコンポーネントが扱えるようになる、ということなのです。

templateUrl――コンポーネントの表示に用いるテンプレートファイルのURLを指定します。ここでは、app.component.htmlを指定しています。

styleUrls――これはスタイルシートのURLを指定します。これは配列になっていて、使用するCSSファイルをまとめて指定します。ここではapp.component.cssのみが使われるようになっています。

――これらの中でもっとも重要なのは、「selector」と「templateUrl」でしょう。selectorはコンポーネントをHTML内に配置する際のカスタムタグ名を指定し、templateUrlでは使用するテンプレートファイルを指定します。これらがわかっていないと、どのファイルをどう修正すればいいのかわかりません。



さて、@Componentアノテーションをつけて作成されているのは、「AppComponent」というクラスです。これは、「export class ○○」という形で書かれています。exportは、オブジェクトをエクスポートする（外部から利用できるようにする）ものです。exportしたクラスは、importで他の場所からロードし利用できるようになるのです。

ここでは、AppComponentクラスをexportする際、titleという変数を用意してあります。ここに用意した値は、後にテンプレート側で利用できるようになります。

――これで、AppComponentというコンポーネントの基本的なソースコードがどうなっているかわかってきました。

(by. SYODA-Tuyano.)

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

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

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {
    title = 'app works!';
}