Angularコンポーネントのクラスファイル

あらゆるコンポーネントの主要部分は、 その機能、すなわちそのプログラム自体です。 Angularでは、コンポーネントの機能は TypeScript言語で記述され、 OOPクラスとして表現されます。

各コンポーネントにおいて、このクラスは 拡張子.tsのファイルに配置されます。 我々のメインコンポーネントでは、 ファイルapp.component.tsになります。

このファイルの内容を見てみましょう。 まず、コンポーネントのクラスに注目してください：

app/app.component.tsexport class AppComponent {
  title: string = 'test';
}

このクラスにはデコレータ@Componentが適用されています。 このデコレータは、コンポーネントを設定するオブジェクトを パラメータとして受け取ります：

app/app.component.ts@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の実務的な仕様のため、 今のところ深く理解する必要はありません。