web-dev-qa-db-ja.com

Angular 5：ルーティングなしのコンポーネントの遅延読み込み

私のWebアプリケーションには、「利用規約」ポップアップがあり、フッター内のリンクをクリックすると開きます（コアコンポーネントです）。ポップアップはいくつかのタブで構成されており、各タブはかなり大きなテンプレートファイルです。

タブテンプレートを移動してチャンクを分離し、遅延読み込みを整理することは可能ですか？デフォルトのAngular lazy-loadingが受け入れられるかどうかはわかりません。ポップアップに個別のルートを設定したくないためです。

angularangular5lazy-loading
12
user3429127

ユーザーがリンクをクリックするのを待ち、クリックイベントが発生するとすぐに、必要なコンポーネントをビューにロードします。覚えておくべきこと：

  1. ビューのコンポーネントにプレースホルダーを定義する必要があります。

  2. 契約条件コンポーネントは、そのモジュールまたはそれが使用されるモジュールのエントリーレベルコンポーネントとして定義する必要があります。

     entryComponents: [
    ChildComponent
  ],

  3. コンポーネントのプレースホルダーを参照し、契約条件コンポーネントを動的に添付してください。

      <div>
      <ng-template #viewContainerRef></ng-template>
   </div>

そして

@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;

コンポーネントを動的に作成します。

createComponent() {

    let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
    let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
    let currentComponent = componentRef.instance;

    currentComponent.selfRef = currentComponent;
  // to track the added component, you can reuse this index to remove it later
    currentComponent.index = ++this.index; 

    // providing parent Component reference to get access to parent class methods
    currentComponent.compInteraction = this;

}

ここにあなたのための例があります： https://add-or-remove-dynamic-component-parent-child.stackblitz.io

5
nircraft