動的コンポーネント

このレッスンでは、Angularでコンポーネントを動的に読み込み、柔軟なアプリケーションを作成する方法を学びます。

動的コンポーネントとは

動的コンポーネントは、テンプレートに直接宣言するのではなく、実行時にビューへ読み込まれます。

動的コンポーネントを使う理由

• 柔軟なUIの描画
• 条件に応じたコンポーネントの表示
• 動的なダッシュボードやモーダルの構築

プレースホルダーを作成する

<ng-container>をプレースホルダーとして使い、動的コンポーネントを読み込みます。

<ng-container #dynamicContainer></ng-container>

ViewChildを使う

コンポーネントクラスで@ViewChildを使ってコンテナにアクセスします。

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

コンポーネントを動的に読み込む

コンポーネントファクトリーリゾルバーを使って、コンポーネントを作成して挿入します。

const componentRef = this.container.createComponent(MyDynamicComponent);

動的コンポーネントにデータを渡す

入力を使って、動的に作成したコンポーネントにデータを渡します。

componentRef.instance.data = 'Hello Dynamic';

動的コンポーネントを削除する

動的コンポーネントはDOMから簡単に削除できます。

this.container.clear();

まとめ

Angularでコンポーネントを動的に作成、管理、削除する方法を理解できました。すばらしい出来です。