この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 13482|答える: 0

[角] 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のサブルートやレイジーローディングを使って直面した問題と要約の一部です。





先の:Java Web Technology Insider Revised PDF HD の詳細な分析
次に:プログラマーの10のレベル あなたはどのレベルに属していますか?
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com