Angular プリロード遅延モジュールの使用方法

今回は、Angular プリロード遅延モジュールの使用方法と、Angular プリロード遅延モジュールを使用する際の 注意事項 について説明します。以下は実際的なケースです。

ルート遅延読み込みの使用では、モジュールを使用してアプリケーションを分割する方法を紹介しました。このモジュールにアクセスすると、Angular はこのモジュールを読み込みます。ただし、少し時間がかかります。ユーザーが初めてクリックするときは、わずかな遅延が発生します。

ルートを事前にロードすることでこれを修正できます。ルーターは、ユーザーが

他の パーツと対話している間に、遅延モジュールを非同期でロードできます。これにより、ユーザーは遅延モジュールに迅速にアクセスできるようになります。

この記事では、前の例に基づいてプリロード機能を追加します。

前のセクションでは、ルート

ルーティング定義 は main.routing.ts にあり、app.module.ts のルート ルーティング定義を使用しました。

Home コンポーネントは事前にロードされることに注意してください。システムの起動後にこのコンポーネントをレンダリングします。

Angular がホーム コンポーネントをレンダリングした後、ユーザーはアプリケーションを操作できるようになり、簡単な構成を通じてバックグラウンドで他のモジュールをプリロードできます。

プリロードを有効にする

forRoot 関数でプリロードされた戦略を提供します。

りー

この PreloadAllModules 戦略は @angular/router から取得されているため、それもインポートする必要があります。

カスタマイズされたプリロード戦略

ルーター パッケージには 2 つの事前定義された戦略があります:

1. プリロードなし

すべてのモジュールをプリロード PreloadAllModules

5秒後にモジュールをロードします

ただし、カスタム ポリシーを自分で定義することもできます。思ったよりも簡単です。たとえば、アプリの初期化から 5 秒後に残りのモジュールをロードするとします。

PreloadingStrategy インターフェイスを実装する必要があり、CustomPreloadingStrategy のカスタム戦略クラスを定義します。

りー

次に、このカスタム ポリシーを使用するように app.module.ts を変更します。このクラスをプロパティにも追加する必要があることに注意してください。

依存性注入を実現するため。 りー

5 秒後に、この汎用モジュールが

自動的にロードされることがわかります。

指定されたモジュールをロードします

ルート内で追加のパラメーターを定義して、どのモジュールをプリロードするかを指定することもできます。この追加データを提供するためにルート定義内のデータを使用します。

りー

次に、新しい読み込み戦略を定義します。

りー

最後に、この戦略を app.module.ts で使用します。

りー

この時点で、モジュールが直接プリロードされていることがわかります。リンクをクリックしても新たなリクエストは発生しません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jsはシンプルな24時間時計を実装します

ReactJS操作フォーム選択

以上がAngular プリロード遅延モジュールの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。