ホームページ > ウェブフロントエンド > jsチュートリアル > Angular プリロード遅延モジュールの使用方法

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

php中世界最好的语言
リリース: 2018-04-17 16:35:01
オリジナル
1373 人が閲覧しました

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

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

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

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

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

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

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

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

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

プリロードを有効にする

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

りー

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

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

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

  1. プリロードなし

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

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

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

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

りー

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

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

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

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

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

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

りー

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

りー

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

りー

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

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

推奨読書:

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

ReactJS操作フォーム選択

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート