Angularコンポーネントのクラスファイル
あらゆるコンポーネントの主要部分は、 その機能、すなわちそのプログラム自体です。 Angularでは、コンポーネントの機能は TypeScript言語で記述され、 OOPクラスとして表現されます。
各コンポーネントにおいて、このクラスは
拡張子.tsのファイルに配置されます。
我々のメインコンポーネントでは、
ファイルapp.component.tsになります。
このファイルの内容を見てみましょう。 まず、コンポーネントのクラスに注目してください：
export class AppComponent {
title: string = 'test';
}
このクラスにはデコレータ@Componentが適用されています。
このデコレータは、コンポーネントを設定するオブジェクトを
パラメータとして受け取ります：
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
プロパティtemplateUrlには、
コンポーネントのレイアウトを含むファイルへの
パスが設定されています。
プロパティstyleUrlsには、
コンポーネントのレイアウトをスタイリングする
CSSファイルへのパスの配列が設定されています。
ご覧の通り、スタイルファイルは複数存在する可能性があります。
プロパティselectorには、
コンポーネントのHTMLコードが出力（マウント）される
HTMLタグのセレクタが設定されています。
今回のケースでは、名前app-rootが確認できます。
この名前は、同名のタグに対応しています。
このタグはレイアウトファイルsrc/index.htmlに
記述されています。このタグが記述されている位置に、
コンポーネントのレイアウトが挿入されます。
プロパティimportsには、
コンポーネントにインポートされるモジュールが
指定されています。
プロパティstandaloneには常に
値trueが指定されます。
現在これはAngularの実務的な仕様のため、
今のところ深く理解する必要はありません。
ファイルapp.component.tsを開き、
内容を確認してください。
複数のスタイルファイルを作成し、 デコレータ内でそれらを接続してください。
