Angular 4.0の落とし穴:サブルートの探索と怠惰な積み込み

クズども · 掲載地 2019/06/13 13:13:10

需要が増えるにつれて、プロジェクトの機能はより複雑になります。現時点では、プロジェクトやコンポーネント、命令、パイプラインを一貫した機能ブロックにモジュール化する必要があります。これはAngular4でモジュールのサブルートや怠慢なロードを探るのにちょうど良い方法です。

前回の開発では、ルートモジュールに単純なルーティング関数が実装されており、これは以下の3ステップにまとめられます。

1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。

ログインが見えます。

2. シェルコンポーネントにナビゲーションバーを追加し、ルーターLinkコマンドがルートの宛先を指し、ルーターLinkActiveが選択したラベルにcssスタイルを追加します

ログインが見えます。

3. シェルコンポーネントのテンプレートにルーター-アウトレットコマンドを追加すると、ビューが表示されます

ログインが見えます。

今はこの基盤でサブルートとモジュールのレイジーロードを実装したいと考えています。

RouterModule.forRoot() および RouterModule.forChild()

RouterModuleオブジェクトは、ルーティング情報を設定するための2つの静的メソッド(forRoot()とforChild()を提供します。

RouterModule.forRoot()メソッドはメインモジュール内の主要なルーティング情報を定義するために使われ、RouterModule.forChild()はRouter.forRoot()メソッドに似ていますが、特徴モジュールでのみ適用可能です。

すなわち、rootモジュールではforRoot()が使われ、部分モジュールではforChild()が使われます。

彼の息子、魯如

例えば、/settings ページの下に /settings/profile と /settings/password の2つのページがあり、それぞれプロファイルページとパスワード変更ページを表しています。別の機能ブロックとして設定し、これをフィーチャーモジュールにカプセル化できます。独自のルートがあり、プロファイルページやパスワードページのルートはサブルートとして設定できます。

ログインが見えます。

SettingsModuleではforChild()メソッドを使用します。なぜなら、SettingsModuleはアプリケーションのメインモジュールではないためです。

もう一つの大きな違いは、SettingsModuleモジュールのメインパスを空のパス('')に設定していることです。なぜなら、パスを /settings に設定すると、/settings/settings に一致するからです。空のパスを指定することで、/settingsパスに一致します。

レイジーロード:loadChildren

設定モジュールのルーティング情報をルートモジュールのAppModuleで設定します:

ログインが見えます。

ここで使われているのは怠惰なロードLoadChildrenプロパティです。 SettingsModuleをAppModuleにインポートする代わりに、loadChildrenプロパティがAngularルートにloadChildrenプロパティで設定されたパスに従ってSettingsModuleモジュールを読み込むよう指示します。これはモジュールのレイジーロード関数の特定の応用であり、ユーザーが/settings/**パスにアクセスすると対応するSettingsModuleモジュールが読み込まれ、アプリケーション起動時にロードされたリソースのサイズが減少します。

loadChildrenの不動産価値は以下の3つの部分から成り立っています。

インポートモジュールへの相対パスが必要です

#分隔符

モジュールクラスの名前をエクスポートします

コモンモジュール

フィーチャーモジュールでCommonModuleを導入したいと伝えましたが、最初はフィーチャーモジュールに導入したいことに気づかず、その結果、ルーティング中にページエラーが報告されました:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ngClass'は'div'の既知のプロパティではないため、バインドできません。

'ngForOf'はpの既知の性質ではないため、結合できません。

組み込みテンプレート上のいかなる指令でも使われていないプロパティバインディング ngForOf 物件名が正しく綴られているか、すべての指示が「@NgModule.declarations」に記載されているか確認してください。

'ngIf'は'div'の既知のプロパティではないため、バインドできません。

......

このようなエラーが多いのは、「ngClass」「ngFor」「ngIf」といった指示が定義されていないように感じます。

長い間確認した結果、機能モジュールでCommonModuleを導入していなかったことが原因で、導入後にこれらのエラーは消えました。

ログインが見えます。

CommonModuleはNgIfやNgForなど、アプリケーションでよく使われる多くの命令を提供します。より正確には、NgIfのような指令は@angular/commonからCommonModuleで宣言されます。

BrowserModuleモジュールをrootモジュールAppModuleにインポートし、CommonModuleがCommonModuleをインポートして再エクスポートしました。結果として、BrowserModuleをインポートすれば、CommonModuleの指示が自動的に表示されます。

BrowserModuleをインポートすると、モジュールが公開したすべてのコンポーネント、指令、パイプラインが、AppModule内の任意のコンポーネントテンプレートで追加の手間なく直接利用可能になります。ただし、BrowserModuleを他のモジュールにインポートしないでください。フィーチャーモジュールやレイジーローディングモジュールは代わりにCommonModuleにインポートすべきです。アプリケーションレベルのプロバイダー全体を再初期化する必要はありません。 BrowserModuleをレイジーローディングモジュールにインポートすると、Angularはエラーを出します。

これらは、過去2日間にAngularのサブルートやレイジーローディングを使って直面した問題と要約の一部です。

[角] Angular 4.0の落とし穴:サブルートの探索と怠惰な積み込み

関連記事

閲覧したセクション