Angularの動的コンポーネントの詳細な説明

使用シナリオ

まず、動的コンポーネントの使用シナリオを明確にしましょう。簡単に言えば、コードの実行中にコンポーネントを動的にロードするには、特定の状況 (ユーザー操作、バックエンドからの結果の要求など) に基づいて、特定のコンポーネントをロードする場所をコードで決定する必要があります。これらのコンポーネントは静的 (固定) ではありません。

公式サイトで示されている例では、動的な広告バナーを構築する場合、新しい広告コンポーネントが継続的にリリースされるため、静的なコンポーネント構造のみをサポートするテンプレートを使用することは明らかに非現実的です。

もう 1 つの一般的な例として、動的ポップアップボックスを見てみましょう。ポップアップするコンポーネントは不確定で、常に更新されます。あちこちに購入ボックスがポップアップし、あちこちにスタイル選択ボックスがポップアップします。静的なコンポーネント構造テンプレートでは、大衆の増大するニーズを満たすことができません。

達成方法

次に、動的コンポーネントを実装するために必要なものを把握します。

1. 動的コンポーネントを配置する場所

動的コンポーネントを追加する場所、つまりアンカーポイントを知る必要があります。では、コンポーネントをロードするには何を使用できるでしょうか?

コンポーネントはアンカーにロードされるのではないのか、アンカーは DOM ノードではないのか、と思われるかもしれません。もちろん、DOM ノードにロードされます。

まず、Angular の DOM を操作する一般的な方法を確認しましょう。DOM を操作するネイティブ JS メソッドについては考えないでください。Angular コンポーネントをロードできるオブジェクトを返すことができると思いますか?

Angular は、DOM クエリと呼ばれるテクノロジを提供します。これは主に、同じ基本機能を持つ @ViewChild および @ViewChildren デコレータから提供されます。

@ViewChild: セレクターに一致するビューの DOM 内の最初の要素またはディレクティブへの単一の参照を返します。

@ViewChildren : QueryList オブジェクトでラップされた複数の参照を返し、セレクターに一致するすべての要素またはディレクティブをビューの DOM で検索します。

基本的な構文:

@ViewChild([テンプレートからの参照], {読み取り: [参照タイプ]});

DOM クエリテクノロジーによって検出されたオブジェクトは、次の 3 つのカテゴリに分類されます。

ElementRef: span のような単純な HTML 要素にマウントされている場合。

TemplateRef: テンプレート要素にマウントされている場合。

ViewContainerRef: 推測できません。通常、プログラマーは読み取り時にこれを指定する必要があります。任意の DOM 要素をビューコンテナーとして使用できます。

公式ウェブサイトの API から、ViewContainerRef だけがコンポーネントに 1 つ以上のビューをアタッチできるコンテナーであり、つまりコンポーネントをロードできるコンテナーであることがわかります。ただし、新しいコンポーネントを兄弟 (ノード) として扱うことができるのは DOM 要素 (コンテナー) であることに注意してください。親子関係ではなく、兄弟です。

コンテナをロードするために ViewContainerRef が使用されていることがわかりました。ViewContainerRef を取得するには 2 つの方法があります。

1つ目は、上記のDOMクエリを通じて@ViewChildをクエリすることです。

<ng-container #addComp></ng-container>
@ViewChild('addComp', {読み取り: ViewContainerRef}) adComp:ViewContainerRef;

2つ目は、依存性注入を使用した公式ウェブサイトの例です。

'@angular/core' から Directive、ViewContainerRef をインポートします。

@指令（{
セレクタ: '[ad-host]',
})
エクスポートクラスAdDirective {
コンストラクター(パブリック viewContainerRef: ViewContainerRef) { }
}

アンカーポイントはng-templateに設定され、ViewContainerRefはディレクティブインジェクションを通じて取得されます。

テンプレート: `
<div class="広告バナーの例">
<h3>広告</h3>
<ng-template 広告ホスト></ng-template>
</div>

2. コンポーネントのインスタンスを取得する方法

コンポーネントをビューにロードすることは、新しいメソッドでインスタンス化してから、append、insert などでアタッチするほど簡単ではありません。動的コンポーネントは、事前にコンパイラによってコンパイルおよび保存され、その後 ComponentFactory でカプセル化される必要があります。後続の Component インスタンスは、ComponentFactory を通じて作成する必要があります。この記事 [翻訳] Angular の動的コンポーネントについて知っておくべきことを読むことができますが、SystemJsNgModuleLoader モジュールローダーは非推奨になったと記載されています。

ComponentFactoryResolver は、ComponentFactory がコンポーネントインスタンスを作成するために使用できる生成されたクラスにコンポーネントをマップする単純なレジストリです。これを使用すると、特定のコンポーネントタイプのファクトリを取得し、ファクトリの create() メソッドを使用してそのタイプのコンポーネントを作成できます。

公式サイトのサンプルコードを見てみましょう。以下は完全なコードではありません。

//ComponentFactoryResolver を注入する
コンストラクター(プライベートcomponentFactoryResolver: ComponentFactoryResolver) { }
 
ロードコンポーネント() {
......
// 広告コンポーネントインスタンスの作成に使用できる生成された ComponentFactory を取得します
const コンポーネントファクトリ = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
 
// コンポーネントをロードするためのコンテナを取得します。const viewContainerRef = this.adHost.viewContainerRef;
ビューコンテナリファレンスをクリアします。
 
// コンポーネントをコンテナに配置し、いくつかのパラメータを渡します。const componentRef = viewContainerRef.createComponent(componentFactory);
(<AdComponent>componentRef.instance).data = adItem.data;
}

これで終わりだと思いますか? このように書かれたコードは実行できると思いますか?若すぎる場合は、フロントウェーブで注意すべき点をいくつか示します。

Angular のコンポーネント、ディレクティブ、パイプはすべてモジュールにカプセル化されています。コンポーネントを例にとると、他のモジュールのコンポーネントを使用する場合は、他のモジュールでこのコンポーネントをエクスポートし、独自のモジュールに他のモジュールをインポートする必要があります。したがって、公式 Web サイトの例の手順を忘れずにインポートおよびエクスポートしてください。

動的コンポーネントの場合は、モジュールの entryComponents プロパティにコンポーネントを登録する必要がありますが、エクスポートする必要はありません。モジュールをインポートする必要があります。

以上がAngularの動的コンポーネントの詳細な説明です。Angularの動的コンポーネントの詳細については、123WORDPRESS.COMの他の関連記事をご覧ください。

以下もご興味があるかもしれません: