コンポーネントのテンプレートが必ずしも固定されているわけではありません。 アプリはランタイム中に新しいコンポーネントをロードする必要があるかもしれません。
使用シナリオ:
1. ページ読み込みは異なるパラメータに応じて異なるコンポーネントを読み込み、異なる効果を示します
2. ページは複数の要素で構成されており、すべてを最初に表示する必要はなく、ユーザーがクリックした後にタブタブや動的なポップアップモーダルボックスなどの情報が表示されます。
この記事の利用シナリオは2つです。想像してみてください。動的読み込みを使わない場合、メインインターフェースを開くとページの隠れたコンポーネントがすべて読み込まれ、すべてのコンポーネントが対応するインターフェースサービスを呼び出します。多くの場合、すべての情報を見る必要がなくなり、リソースの大きな無駄遣いとなり、メインインターフェースの読み込みが遅くなりユーザー体験にも影響を及ぼす可能性があります。
ngでコンポーネントを動的にロードする方法は2つあります。
すでに宣言済みのコンポーネントを読み込む:ComponentFactoryResolverを使ってコンポーネントのインスタンスを別のコンポーネントビューにレンダリングします。
コンポーネントを動的に作成・ロード:ComponentFactoryとCompilerを使ってコンポーネントを作成・レンダリング
私たちのニーズに応じて、個々のコンポーネントは事前に開発され、同じコンポーネント上に表示する必要があります。 ですので、最初の方法は私たちの要件を満たしています。
ComponentFactoryResolverを使ってコンポーネントを動的に読み込むには、以下の概念を理解する必要があります:
- ViewChild:ビュー上の対応する要素を取得できるプロパティデコレーター。
- ViewContainerRef:コンポーネントを作成および削除できるビューコンテナ;
- ComponentFactoryResolver:あるコンポーネントを別のビューにレンダリングできるコンポーネントパーサです。
まずレンダリングを見て、modal1ボタンをクリックしてmodal1コンポーネントを動的に読み込み、modal2ボタンをクリックしてmodal2コンポーネントを動的に読み込みます。
まず、角度プロジェクトを作成します。
4つのコンポーネント、すなわちindex、modal1、modal2、modal3を作成し、そのうちmodal1とmodal2が動的に読み込まれたコンポーネントです。
指数成分
HTML:
TS:
Modal1 コンポーネント
HTML:
TS:
Modal2 コンポーネント
HTML:
TS:
Modal3コンポーネント
HTML:
TS:
3つのモーダルのために彼らの名前をコンストラクターに印刷しました。
Modal1とModal2はどちらも動的に読み込まれます。ボタンをクリックして読み込むときのみ実行コンストラクタが起動します。Modal3は動的ロードを行わず、親インターフェースが読み込まれた後にModal3インターフェースのコンストラクタが即座に実行されます。
このようにして、動的ロードの利点が実感でき、使わなければ読み込まれません。これはC#のレイジーロードに似ています。
ソースコードダウンロード:
観光客の皆さん、この投稿の隠された内容を見たい方は、どうぞ 答える
リソース：ハイパーリンクのログインが見えます。
| 
掲載地 2020/05/29 16:40:00
|
|
|
|
地主|
掲載地 2021/02/02 13:56:30
|
掲載地 2022/10/26 17:27:19
|
