Angular 사전 로드 지연 모듈 의 예제 구현

사용경로 지연 로드 중에서 우 리 는 모듈 을 사용 하여 응용 을 분리 하 는 방법 을 소개 했다.이 모듈 에 접근 할 때 Angular 는 이 모듈 을 불 러 옵 니 다.시간 이 좀 걸 려 요.사용자 가 처음 클릭 할 때 약간의 지연 이 있 을 수 있 습 니 다.
우 리 는 이 문 제 를 미리 불 러 오 는 경 로 를 통 해 복구 할 수 있다.로 케 이 션 은 사용자 가 다른 부분 과 상호작용 을 할 때 비동기 로 딩 지연 모듈 을 불 러 올 수 있 습 니 다.이것 은 사용자 가 지연 모듈 에 접근 할 때 더욱 빨리 접근 할 수 있 게 한다.
본 고 는 이전 예 시 를 바탕 으로 미리 불 러 오 는 기능 을 추가 할 것 이다.
이전 절 에서,우리 의 루트 는 main.routing.ts 로 정의 되 었 고,우 리 는 app.module.ts 에서 루트 정 의 를 사 용 했 습 니 다.
주의해 야 할 것 은 홈 구성 요 소 는 미리 불 러 옵 니 다.우 리 는 시스템 이 시 작 된 후에 이 구성 요 소 를 렌 더 링 할 것 이다.
Angular 렌 더 링 홈 구성 요소 이후 사용 자 는 응용 프로그램 과 상호작용 을 할 수 있 습 니 다.우 리 는 간단 한 설정 을 통 해 배경 에 다른 모듈 을 미리 불 러 올 수 있 습 니 다.
미리 불 러 오기 사용 하기
우 리 는 forRoot 함수 에서 미리 불 러 오 는 정책 을 제공 합 니 다.

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 { PreloadAllModules } from '@angular/router';

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

이 PreloadAllModules 정책 은@angular/router 에서 왔 기 때문에 가 져 와 야 합 니 다.
사전 로드 정책 맞 춤 형
router 패키지 에서 두 정책 을 미리 정 의 했 습 니 다.

미리 로드 하지 않 음NoPreloading

모든 모듈 을 미리 불 러 옵 니 다PreloadAllModules

5 초 후 로 딩 모듈
단,사용자 정의 정책 을 정의 할 수 있 습 니 다.생각 보다 쉽 습 니 다.예 를 들 어 초기 화 5 초 후에 다른 모듈 을 불 러 오 기 를 원 합 니 다.
인터페이스 PreloadingStrategy 를 실현 해 야 합 니 다.사용자 정의 PreloadingStrategy 의 사용자 정의 정책 클래스 를 정의 합 니 다.

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());
  }
}

그리고 app.module.ts 를 수정 하여 이 사용자 정의 정책 을 사용 합 니 다.주의해 야 할 것 은 프로 다 이 버 에 이 종 류 를 추가 해 야 한 다 는 것 입 니 다.의존 주입 을 실현 하 다.

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 { }

5 초 후에 이 기능 모듈 이 자동 으로 불 러 오 는 것 을 볼 수 있 을 것 이다.

로 딩 지정 모듈
우 리 는 또한 경로 에 추 가 된 매개 변 수 를 정의 하여 어떤 모듈 을 미리 불 러 올 지 지정 할 수 있 습 니 다.우 리 는 경로 정의 의 data 를 사용 하여 이 추가 데 이 터 를 제공 합 니 다.

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule', data: {preload: true} },
  { path: '**', component: HomeComponent }
];

그리고 우 리 는 새로운 로드 정책 을 정의 합 니 다.

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

export class PreloadSelectedModules implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : Observable.of(null);
  }
}

마지막 으로 app.module.ts 에서 이 정책 을 사용 합 니 다.

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 { PreloadSelectedModules } from './preload.module';

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

이 때 모듈 이 바로 미리 불 러 온 것 을 볼 수 있 습 니 다.링크 를 클릭 하 더 라 도 새로운 요청 은 일어나 지 않 습 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.