Angular のコンポーネントについて、

今一度内容を確認する。

コンポーネントの基本

Angular のコンポーネントは、＠Component デコレーターが付与されている。

HTML や CSS を設定し、設定された HTML のタグに対する処理を記載する。

画面に表示する部品となるもの。

＠Component デコレータをつけることで、

画面表示するものであることを Angular フレームワークに教えているようなイメージ。（役割を示す、注釈のようなイメージ？）

実際のコードで確認

下記、コンポーネントを作成した際に、記載されている Type Script のコードを一つづつ確認する。

1
2
3
4
5
6
7
8
9

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
}

別ファイルで定義しているプログラムの呼び出しを行う。

1

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

@Component 以下は、コンポーネントのメタデータであり、動作や表示方法を設定する。

@Component が画面表示という役割であり、その配下に設定するのは実際の画面表示の設計書となる部分。

selector は、HTML のタグとして利用する際の名前を設定する。

1
2
3
4
5
6
7

<app-root></app-root>のように使う。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

templateUrl は画面に表示する Html を指定する。

下記は、html ファイルを指定しているが、タグを直接記載することもできる。

styleUrls はコンポーネントが利用するスタイルシートを指定する。

html 同様、ファイル指定ではなく CSS を直接記載することも可能。

＠Component に指定できるメタデータは上記三つ以外にもいっぱいある。

クラス内には、イベント発生時の動作を記載していく。