Angular のプリロード構成と遅延ロード構成に関する簡単な説明

この記事では、Angular のルーティング設定を理解し、プリロード設定と遅延読み込み設定について簡単に紹介します。

NgModule は Angular モジュールのコアです。最初にそれについて説明しましょう。

1. @NgModule の役割:

• NgModule の最も基本的な意味は、開発者がビジネス コードを整理できるようにすることです。密接に関連するコンポーネントをまとめて整理するには、NgModule を使用するのが基本です。
• NgModule は、コンポーネント、命令、パイプなどを使用できるかどうかを制御するために使用されます。同じ NgModule 内のコンポーネントはデフォルトで相互に表示されます。外部コンポーネントの場合は、NgModule によってエクスポートされたコンテンツのみが表示されますつまり、定義した NgModule がコンテンツをエクスポートしない場合、外部ユーザーは、モジュールをインポートしたとしても、その中で定義されたコンテンツを使用できません。
• NgModule はパッケージ化するときに使用される最小単位です。パッケージ化するとき、すべての @NgModule とルーティング設定がチェックされます。Angular の最下層は webpack を使用してパッケージ化されます。 Angular は既に Webpack を構成しているため、開発者にとっては非常に簡単です。そうでない場合は、環境を自分で構成する必要があります。
• NgModule は Router が非同期にロードできる最小単位です Router がロードできる最小単位はコンポーネントではなくモジュールです。もちろん、モジュール内にコンポーネントを 1 つだけ配置することは許可されており、多くのコンポーネント ライブラリでこれが行われます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

2. @NgModule 構造の説明:

@NgModule({ 
　　declarations: [], //属于当前模块的组件、指令及管道
　　imports: [], //当前模板所依赖的项，即外部模块（包括httpModule、路由等）
　　export:[],//声明出应用给其他的module使用
　　providers: [], //注入服务到当前模块
　　bootstrap: []//默认启动哪个组件(只有根模块才能设置bootstrap属性)
})

3. 遅延ロード命令

# (1) RouterModule オブジェクトは 2 つの静的メソッドを提供します: forRoot () および forChild() を使用してルーティング情報を構成します。

• forRoot()//メインモジュールでメインのルーティング情報を定義します
• forChild()``//Application in feature module (sub-module)

(2) 遅延読み込み:loadChildren

対応するモジュールはここで AppModule に追加されませんが、 loadChildren 属性は、loadChildren 属性で構成されたパスに基づいて、対応するモジュールをロードするように Angular ルーティングに指示します。これはモジュールの遅延ロード機能の具体的なアプリケーションであり、ユーザーが /xxx/** パスにアクセスすると、対応するモジュールがロードされ、アプリケーションの起動時にロードされるリソースのサイズが削減されます。 loadChildren の属性値は 3 つの部分で構成されます:

• インポートする必要があるモジュールの相対パス
• #Separator
• エクスポートされたモジュールの名前class

(3) プリロード

遅延ロードを使用すると、ルートが初めてモジュールをロードするときに応答が遅れることがあります。現時点では、プリロード戦略を使用してこの問題を解決できます。

Angular は 2 つの読み込み戦略を提供します。

• PreloadAllModules-preloading
• NoPreloading-プリロードなし (デフォルト)。

RouterModule.forRoo() 2 番目のパラメータ は構成オプションを追加できます。構成オプションの 1 つは preloadingStrategy 構成です。この構成はプリロードポリシー設定。

//使用默认预加载-预加载全部模块
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { routes } from './main.routing'; 
import { RouterModule } from '@angular/router'; 
import { PreloadAllModules } from '@angular/router'; 
@NgModule({ 
　　declarations: [AppComponent], 
　　imports: [ BrowserModule, RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], 
　　providers: [], 
　　bootstrap: [AppComponent] }) 
export class AppModule { }

ただし、モジュールのプリロードを自分で制御することを好みます。この場合、プリロード戦略をカスタマイズする必要があります

A. カスタマイズ - 5 秒後にすべてのモジュールをロードします

アプリと同じレベルで新しいcustom-preloading-strategy.tsファイルを作成します。

import { Route } from '@angular/router';
import { PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs/Rx';

export class CustomPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
        return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
    }
}

#

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { CustomPreloadingStrategy } from './preload';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { preloadingStrategy:  CustomPreloadingStrategy })
  ],
  providers: [CustomPreloadingStrategy ],
  bootstrap: [AppComponent]
})
export class AppModule { }

B、カスタム指定モジュールをapp.modulesのプロバイダーに挿入します。 ts Preloading

selective-preloading-strategy.ts ファイルをアプリと同じレベルに作成します (このファイルは、プロバイダーによって app-routing.module.ts に挿入され、ルートで定義されたデータが挿入される必要があります)追加パラメータを介して渡されます) プリロードするかどうかを設定します)

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];

  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data[&#39;preload&#39;]) {
      return load();
    } else {
      return Observable.of(null);
    }
  }
}

app-routing.module.ts (このファイルは遅延読み込みとプリロードを組み合わせています)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanDeactivateGuard } from './guard/can-deactivate-guard.service';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy'; // 预加载
import { PageNotFoundComponent } from './not-found.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'mian', loadChildren: './main/mian.module#MainModule' }, // 懒加载(在这个层级的router配置文件及module文件都不需要引入该组建)
{ path: 'home', loadChildren: './home/home.module#HomeModule', data: { preload: true } }, // 懒加载 + 预加载
{ path: '**', component: PageNotFoundComponent } // 注意要放到最后
];
@NgModule({
　　imports: [
　　　　RouterModule.forRoot(appRoutes,{
　　　　　　enableTracing: true, // <-- debugging purposes only
　　　　　　preloadingStrategy: SelectivePreloadingStrategy // 预加载
　　　　})
　　],
　　exports: [
　　　　RouterModule
　　],
　　providers: [
　　　　CanDeactivateGuard,
　　　　SelectivePreloadingStrategy
　　]
})
export class AppRoutingModule { }

4. Sub -routing 作成手順 (作成手順なし、直接手動) (1) 新しいメイン フォルダーを作成します

Directory main

main.component .html
main.component.scss
main.component.ts
main.module.ts
main-routing.module.ts

• ##main.service.ts

• ディレクトリ A

  A.component.html
  • ##A.component.scss
  • A.component.ts
  • • ディレクトリB
  • B.component .html
  • B.component.scss
  • ##B.component.ts
  たとえば、上記の main.component.html には、サブビューを配置するための領域があります (アイデアについては以下で説明します) (その他は詳しく説明しません)

<div>下面的区域是另一个路由出口</div>
<router-outlet></router-outlet><!--此处依照下面的路由配置，默认显示AComponent组件的内容-->

(1). main-routing.module.tsのmainフォルダ配下にルーティングを設定します。コンポーネントを参照する必要があります。各コンポーネント (ルーティングを設定する必要があるコンポーネント) の

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {MainComponent} from './main.component';
import{AComponent} from './A/A.component';
import{BComponent} from './B/B.component';
const mainRoute: Routes = [
  {
    path: '',
    component: MainComponent,
    data: {
      title: '面试预约',
    },
    children: [
      {
        path: '',//path为空表示默认路由
        component: AComponent,
        data: {
          title: '大活动',
        }
      },
      {
        path: 'activity',
        component: BComponent,
        data: {
          title: '中活动',
        }
      }
    ]
  }
];


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

(2)、通常、main.service.ts は http リクエストを送信するために使用されます

import { AppService } from './../../app.service';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpParams } from '@angular/common/http';
import { PageData, ActivitysManage } from './model/activitys-manage';
import { BehaviorSubject } from 'rxjs';
import {PageDataBig, ActivitySmall, PageDataSmall } from './model/activitys-manage';
@Injectable()
export class MainService {
  
}

main文件夹下的组件如要调用MainService,需要在组件的ts文件引入MainService

（3）、在main.module.ts中引入各组件（包括自身、路由配置文件所用到的所有组件以及路由的module）

import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MainComponent } from './interview-appointment.component';
import { AComponent } from './A/A.component';
import { BComponent } from './B/B.component';
import { NgModule } from '@angular/core';
import { CoreFrameCommonModule } from '../../common/common.module';
import { MainRoutingModule } from './main-routing.module';
import { NgZorroAntdModule } from '../../zorro/ng-zorro-antd.module';
import { MainService } from './interview-appointment.service';
@NgModule({
  imports: [FormsModule,CoreFrameCommonModule, CommonModule, MainRoutingModule,NgZorroAntdModule],
  exports: [],
  declarations: [MainComponent,AComponent,BComponent],
  providers: [MainService],
})
export class MainModule{ }

更多编程相关知识，请访问：编程视频！！

以上がAngular のプリロード構成と遅延ロード構成に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。