Angular モジュールの使用と遅延読み込みについて話す

#関連チュートリアルの推奨事項:

angularjs (ビデオ チュートリアル)

1. Angular 組み込みモジュール

2. Angular カスタム モジュール

プロジェクトが比較的小さい場合、モジュールをカスタマイズする必要はありません。ただし、プロジェクトが非常に大きい場合、すべてのコンポーネントをルート モジュールにマウントすることは特に適切ではありません。したがって、現時点ではモジュールをカスタマイズしてプロジェクトを整理できます。また、ルートの遅延読み込みは、Angular カスタム モジュールを通じて実現できます。

ng g module mymodule

新しいユーザー モジュールを作成します

ng g module module/user

ユーザー モジュールの下に新しいルート コンポーネントを作成します

ng g component module/user

新しいものを作成する ユーザー モジュールの下のアドレス、順序、プロファイル コンポーネント

ng g component module/user/components/address
ng g component module/user/components/order
ng g component module/user/components/profile

ユーザー モジュールをルート モジュールにマウントするにはどうすればよいですか?

アプリ ルート コンポーネントのテンプレート ファイル app.component.html 内のユーザー コンポーネントを参照するとエラーが報告されます

アクセスするには次の処理が必要です

#app.module.ts モジュールで導入

##ユーザー モジュールは、外部からアクセスできるコンポーネントを公開します

2. 
   ルート テンプレート app.component.html に

3. <app-user></app-user>

   を導入します。app-address コンポーネントを直接使用する必要がある場合は、ルート コンポーネントの場合は、最初にそれをユーザー モジュール user.module に追加する必要もあります。ts 露出

/

他のモジュールが公開されたコンポーネントを使用できるようにコンポーネントを公開します

/

エクスポート:[ UserComponent,AddressComponent]

製品をルート モジュールにマウントする方法 モジュールについてはどうですか?
上と同じ

ユーザー モジュールの下にサービスを作成します

作成

ng g サービス モジュール/user/services/common

1. 
   ユーザー モジュールでのサービスの紹介

   user.module.ts

2. 
   

##モジュールの遅延読み込みを実装するためのルーティングの構成

モジュールの作成:

ng g module module/user --routing
ng g module module/article --routing
ng g module module/product --routing

コンポーネントの作成:

ng g component module/user
ng g component module/user/components/profile
ng g component module/user/components/order
ng g component module/article
ng g component module/article/components/articlelist ng g component module/article/components/info
ng g component module/product
ng g component module/product/components/plist
ng g component module/product/components/pinfo

記事を例に挙げてみましょう:

angular 設定の遅延読み込み

angular でのルーティングはコンポーネントとモジュールの両方を読み込むことができ、遅延読み込みと呼ばれるものは実際にはモジュールを読み込むことを意味します。コンポーネントの遅延読み込みの例はまだありません。

コンポーネントをロードするには、component キーワードを使用します。

モジュールをロードするには、loadChildren キーワードを使用します。

1. アプリ内に新しい app-routing.module.ts

コンテンツを作成しますフォルダー 次のように:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

forRoot はルート モジュールにルーティング設定をロードするために使用され、

および forChild はサブモジュールにルーティング設定をロードするために使用されます。

注: AppRoutingModule モジュールをルート テンプレート app.module.ts

import { AppRoutingModule } from './app-routing.module';
...
imports: [
    AppRoutingModule,
]

2 にインポートする必要があります。サブモジュールでルーティングを構成します

\module\article\ topic- routing.module.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';

    // import {ArticleComponent} from './article.component';
    const routes: Routes = [
    // {
    //     path:'',
    //     component:ArticleComponent
    // }
    ];

    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })
    export class ArticleRoutingModule { }

でルーティングを構成します。新しいプロジェクトを作成するときにルーティング モジュールを追加することもできます。上記の構成は省略できます。

記事モジュール -routing .module.ts ルーティングを構成します

.....

import {ArticleComponent} from './article.component';
const routes: Routes = [
  {
    path:'',
    component:ArticleComponent
  }
];

......

3. アプリのルーティング モジュールでルーティングを構成します

const routes: Routes = [
  {
    path:'article',
    //写法一：
    loadChildren:'./module/article/article.module#ArticleModule'

    //写法二
    // loadChildren: () => import('./module/user/user.module').then( m => m.UserModule)  
  },
  // {
  //   path:'user',loadChildren:'./module/user/user.module#UserModule'
  // },
  // {
  //   path:'product',loadChildren:'./module/product/product.module#ProductModule'
  // },
  {
    path:'**',redirectTo:'article'
  }
];

以前に新しいモジュールを作成するときに -routing を追加しなかった場合、モジュール

product module 製品のルーティングを構成する必要があります: module\product\product-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {ProductComponent} from './product.component';
const routes: Routes = [
  {
    path:'',
    component:ProductComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductRoutingModule { }

product モジュール: module\product\product.module.ts

import { ProductRoutingModule } from './product-routing.module';

imports: [
    ProductRoutingModule
  ],

ユーザー モジュール

ユーザーのルーティング: \module\user\user-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {UserComponent} from './user.component';
const routes: Routes = [
  {
    path:'',
    component:UserComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

ユーザーのモジュール: \module\user\user.module.ts

import {UserRoutingModule} from './user-routing.module';  +

 imports: [
    UserRoutingModule   +
  ],

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

RouterModule オブジェクトには、ルーティング情報を構成するための 2 つの静的メソッド forRoot() と forChild() が用意されています。

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

つまり、ルート モジュールでは forRoot() を使用し、サブモジュールでは forChild() を使用します。

サブルーティングの構成

製品モジュールの product-routing.module.ts でサブルーティングを構成します。

import { PlistComponent } from './components/plist/plist.component';
import { CartComponent } from './components/cart/cart.component';
import { PinfoComponent } from './components/pinfo/pinfo.component';

const routes: Routes = [
  {
    path:'',
    component:ProductComponent,
    children:[
      {path:'cart',component:CartComponent},
      {path:'pcontent',component:PinfoComponent}
    ]
  },
  {path:'plist',component:PlistComponent}
];

製品モジュール テンプレート product.component.html router-outlet を追加

1. <router-outlet></router-outlet>

簡単にジャンプできるようにページ app.component.html にメニューを追加

2. <a>商品模块</a>
   <a>商品列表</a>

その他のプログラミング関連知識、アクセス可能:

プログラミング学習コース
3. ! ！

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