Angularコンポーネントを理解する

コンポーネントはAngularアプリケーションを構成する基本要素です。このレッスンでは、コンポーネントとそのライフサイクルについて学びます。

コンポーネントとは

コンポーネントは、HTML、CSS、TypeScriptのコードを含むUIの一部です。アプリケーションのユーザーインターフェースの一部分を表します。

コンポーネントを作成する

Angular CLIを使うと、コンポーネントを簡単に作成できます。

ng generate component my-component

ng generate component my-component

コンポーネントの構成

Angularコンポーネントには、通常、次の4つの主要なファイルがあります。

• .html: テンプレート
• .ts: ロジック
• .css: スタイル
• .spec.ts: テスト

コンポーネントデコレーター

@Componentデコレーターは、コンポーネントクラスをテンプレートとスタイルに関連付けます。

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

ライフサイクルフック

Angularコンポーネントには、特定のタイミングでコードを実行できるライフサイクルフックがあります。よく使われるフックには、ngOnInit()やngOnDestroy()があります。

ngOnInit()を使う

ngOnInit()は、Angularがコンポーネントのデータを初期化した後に実行されます。初期設定に適しています。

ngOnInit() {
  console.log('Component initialized!');
}

コンポーネントを表示する

他のテンプレートでコンポーネントのセレクターを使うと、そのコンポーネントを表示できます。

<app-my-component></app-my-component>

まとめ

コンポーネントの概要、作成方法、ライフサイクルフックについて学びました。よくできました。