Angular でのモジュールの遅延読み込みとそのコンポーネントの動的表示について話しましょう

angular モジュールを遅延ロードし、ルーティングせずにモジュール内で宣言されたコンポーネントを動的に作成するにはどうすればよいですか?次の記事でその方法を紹介しますので、ご参考になれば幸いです！

環境: Angular 13.x.x

Angular は、ルーティングによる特定のページ モジュールの遅延読み込みをサポートしています。最初の削減が達成されました。 . 画面サイズは、最初の画面の読み込み速度を向上させるために使用されますが、このルーティング方法ではニーズを満たせない場合があります。 [関連チュートリアルの推奨事項: "angularjs ビデオ チュートリアル "]

たとえば、ボタンをクリックすると、ツールバーの行が表示されます。このツールバー コンポーネントをパッケージ化したくないです。デフォルトでは main.js に追加されますが、コンポーネントは動的にロードされ、ユーザーがボタンをクリックした後に表示されます。

では、なぜ動的にロードする必要があるのでしょうか? ツールバー コンポーネントが導入されている場合ターゲット ページ コンポーネントに直接追加すると、ツールバー コンポーネントのコードがターゲット ページ コンポーネントが配置されているモジュールにパッケージ化されます。これにより、ターゲット ページ コンポーネントが配置されているモジュールによって生成される js のサイズが大きくなります。 ; 動的な遅延読み込みにより、ユーザーがボタンをクリックした後にのみツールバー コンポーネントを読み込むことができます。このようにして、最初の画面のサイズを縮小するという目的を達成できます。 angular プロジェクトを作成し、新しい

ToolbarModule

を作成します。プロジェクトのディレクトリ構造は図

の目的を達成するために、次のとおりです。デモでは、

ToolbarModule

の HTML テンプレートに約 1 メートルの Base64 画像を配置し、それを AppModuleToolbarModule で直接引用して、ng を実行しました。 build を実行すると、実行結果は図

## のようになり、パッケージング サイズが 1.42mb

に達したことがわかります。ユーザーがこのページを更新するたびに、ユーザーがツールバーの表示ボタンをクリックしたかどうかに関係なく、ツールバー コンポーネントに関連するコンテンツが読み込まれ、リソースの無駄が発生するため、次のように

ToolbarModule を削除します。 AppModule の imports 宣言から取得し、ユーザーが表示する最初のクリック時にツールバー コンポーネントを遅延読み込みします。ツールバー コンポーネントの遅延読み込み

まず、新しい

ToolbarModule

と

ToolbarComponent を作成し、ToolbarModule で ToolbarComponent を宣言します

#toolbar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToolbarComponent } from './toolbar.component';
 
@NgModule({
    declarations: [ToolbarComponent],
    imports: [CommonModule],
    exports: [ToolbarComponent],
})
class ToolbarModule {}
 
export { ToolbarComponent, ToolbarModule };

toolbar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'toolbar',
    templateUrl: './toolbar.component.html',
    styles: [
        `
    svg {
      width: 64px;
      height: 64px;
    }
    Angular でのモジュールの遅延読み込みとそのコンポーネントの動的表示について話しましょう {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
    `,
    ],
})
export class ToolbarComponent implements OnInit {
    constructor() {}

    ngOnInit(): void {}
}

toolbar.component。 html

<p>
  <svg><path></path><path></path><path></path></svg>
  <svg>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
  </svg>
  <angular>" alt="">
</angular></p>

次に、

AppComponent

のボタン クリック イベント ハンドラーにツールバー モジュールを読み込むコードを記述します:

app.component.ts

import { Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'root',
    template: `
               <p class="container h-screen flex items-center flex-col w-100 justify-center">
                 <p class="mb-3"
                      [ngClass]="{ hidden: !isToolbarVisible }">
                   <ng-container #toolbar></ng-container>
                 </p>
                 <p>
                   <button (click)="toggleToolbarVisibility()"
                           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{ isToolbarVisible ? &#39;隐藏&#39; : &#39;显示&#39; }}</button>
                   <p class="mt-3">首屏内容</p>
                 </p>
               </p>
             `,
})
export class AppComponent {
    title = &#39;ngx-lazy-load-demo&#39;;
    toolbarLoaded = false;
    isToolbarVisible = false;
    @ViewChild(&#39;toolbar&#39;, { read: ViewContainerRef }) toolbarViewRef!: ViewContainerRef;

    constructor(private _injector: Injector) {}

    toggleToolbarVisibility() {
        this.isToolbarVisible = !this.isToolbarVisible;
        this.loadToolbarModule().then();
    }

    private async loadToolbarModule() {
        if (this.toolbarLoaded) return;
        this.toolbarLoaded = true;
        const { ToolbarModule, ToolbarComponent } = await import(&#39;./toolbar/toolbar.module&#39;);
        const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
        const { injector } = moduleRef;
        const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
            injector,
            ngModuleRef: moduleRef,
        });
    }
}

キーは行 32 ～ 42 にあります。まず、動的な

import

を通じて

toolbar.module.ts にモジュールをインポートし、# を呼び出します##createNgModuleRef そして、現在のコンポーネントの Injector を ToolbarModule の親 Injector として渡し、ToolbarModule## をインスタンス化します。 #getmoduleRef オブジェクト、最後に HTML テンプレートで宣言された ViewContainerRef オブジェクトの 。createComponent メソッドは ToolbarComponent コンポーネント を作成します。

private async loadToolbarModule() {
    if (this.toolbarLoaded) return;
    this.toolbarLoaded = true;
    const { ToolbarModule, ToolbarComponent } = await import('./toolbar/toolbar.module');
    const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
    const { injector } = moduleRef;
    const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
        injector,
        ngModuleRef: moduleRef,
    });
}

今回は、ng build

最初の画面で、実行後のパッケージのサイズを見てみましょう。その理由は、ToolbarModule と # が

AppModule

と AppComponent

##ToolbarComponent## に直接インポートされていないためです。 #、

ToolbarModule は別の js ファイル (Lazy Chunk Files) にインポートされます。Display ボタンが初めてクリックされると、 を含むこのパッケージがロードされます。 ## の js ファイル次の gif デモに注目してください。初めて show ボタンをクリックすると、追加のペア src_app_toolbar_toolbar_module_ts.js# が表示されます。 ##ファイル リクエストプログラミング関連の知識の詳細については、

プログラミング ビデオ

をご覧ください。 ！

以上がAngular でのモジュールの遅延読み込みとそのコンポーネントの動的表示について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。