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

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

青灯夜游

リリース： 2022-10-26 19:30:06

転載

1778 人が閲覧しました

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 &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { ToolbarComponent } from &#39;./toolbar.component&#39;;
 
@NgModule({
    declarations: [ToolbarComponent],
    imports: [CommonModule],
    exports: [ToolbarComponent],
})
class ToolbarModule {}
 
export { ToolbarComponent, ToolbarModule };

ログイン後にコピー

toolbar.component.ts

import { Component, OnInit } from &#39;@angular/core&#39;;

@Component({
    selector: &#39;toolbar&#39;,
    templateUrl: &#39;./toolbar.component.html&#39;,
    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 class="flex">
  <svg t="1652618923451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2104" width="200" height="200"><path d="M412 618m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2105"></path><path d="M673.19 393h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM600.89 235H423.11C367.91 235 323 190.28 323 135.32v-12.5a25 25 0 0 1 50 0v12.5c0 27.39 22.48 49.68 50.11 49.68h177.78c27.63 0 50.11-22.29 50.11-49.68v-16.5a25 25 0 1 1 50 0v16.5c0 54.96-44.91 99.68-100.11 99.68zM673.19 585.5h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM467 778H340a25 25 0 0 1 0-50h127a25 25 0 0 1 0 50z" fill="#087E6A" p-id="2106"></path><path d="M739.76 952H273.62a125.14 125.14 0 0 1-125-125V197a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM273.62 122a75.08 75.08 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V197a75.08 75.08 0 0 0-75-75z" fill="#087E6A" p-id="2107"></path></svg>
  <svg t="1652618941842"
       class="icon"
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       p-id="2247"
       width="200"
       height="200">
    <path d="M415 624m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z"
          fill="#C9F4EB"
          p-id="2248"></path>
    <path d="M695 790H362a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM583 649H362a25 25 0 0 1 0-50h221a25 25 0 0 1 0 50zM262 287H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 455.33H129a25 25 0 1 1 0-50h133a25 25 0 0 1 0 50zM262 623.67H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 792H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2249"></path>
    <path d="M761.76 964H295.62a125.14 125.14 0 0 1-125-125V209a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM295.62 134a75.09 75.09 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V209a75.09 75.09 0 0 0-75-75z"
          fill="#087E6A"
          p-id="2250"></path>
    <path d="M617 376H443a25 25 0 0 1 0-50h174a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2251"></path>
    <path d="M530 463a25 25 0 0 1-25-25V264a25 25 0 0 1 50 0v174a25 25 0 0 1-25 25z"
          fill="#087E6A"
          p-id="2252"></path>
  </svg>
  <Angular でのモジュールの遅延読み込みとそのコンポーネントの動的表示について話しましょう src="<这里应该是一张大小将近1M的base64图片, 内容较大, 就略去了...>" alt="">
</p>

ログイン後にコピー

次に、

AppComponent

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

app.component.ts

import { Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef } from &#39;@angular/core&#39;;

@Component({
    selector: &#39;root&#39;,
    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(&#39;./toolbar/toolbar.module&#39;);
    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 サイトの他の関連記事を参照してください。