Angular의 사전 로드 구성 및 지연 로드 구성에 대한 간략한 설명

이 기사에서는 Angular의 라우팅 구성을 이해하고 사전 로드 구성과 지연 로드 구성을 간략하게 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

NgModule은 Angular 모듈의 핵심입니다. 먼저 이야기해 보겠습니다.

1. @NgModule의 역할:

• NgModule의 가장 근본적인 의미는 개발자가 NgModule을 사용하여 밀접하게 관련된 구성 요소를 함께 구성할 수 있도록 돕는 것입니다.
• NgModule은 컴포넌트, 명령어, 파이프 등을 사용할 수 있는지 여부를 제어하는 ​​데 사용됩니다. 동일한 NgModule의 컴포넌트는 기본적으로 서로 표시되지만 외부 컴포넌트의 경우 NgModule에서 내보낸 내용만 볼 수 있습니다. 즉, 정의한 NgModule이 콘텐츠를 내보내지 않으면 외부 사용자는 모듈을 가져오더라도 여기에 정의된 콘텐츠를 사용할 수 없습니다.
• NgModule은 패키징 시 사용되는 가장 작은 단위로, @NgModule과 라우팅 구성을 모두 확인하여 Webpack을 사용해 패키징합니다. Angular는 이미 웹팩을 구성했기 때문에 개발자가 훨씬 쉽게 구성할 수 있습니다. 그렇지 않으면 개발자가 직접 환경을 구성해야 합니다.
• NgModule은 Router가 비동기적으로 로드할 수 있는 가장 작은 단위입니다. 물론 모듈에는 하나의 구성 요소만 배치할 수 있으며 많은 구성 요소 라이브러리가 이를 수행합니다. [관련 튜토리얼 추천: "angular tutorial"]

2. @NgModule 구조 설명:

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

3. 지연 로딩 설명

(1) RouterModule code> 객체는 라우팅 정보를 구성하기 위해 <code>forRoot() 및 forChild()라는 두 가지 정적 메서드를 제공합니다. RouterModule对象提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

• forRoot()//在主模块中定义主要的路由信息
• forChild()``//应用在特性模块（子模块）中

（2）懒加载：loadChildren

此处并没有将对应的模块加入到AppModule中，而是通过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用，当用户访问 /xxx/** 路径的时候，才会加载对应的模块，这减少了应用启动时加载资源的大小。 loadChildren的属性值由三部分组成：

• 需要导入Module的相对路径
• #分隔符
• 导出模块类的名称

（3）预加载

在使用懒加载的情况下，路由第一次加载某个模块时，有时反应有延迟。这时就可以用预加载策略来解决这个问题。

Angular提供了两种加载策略，

• PreloadAllModules-预加载
• NoPreloading-没有预加载（默认）。

RouterModule.forRoo()的第二个参数可以添加配置选项，配置选项中就有一个是preloadingStrategy

forRoot()//메인 모듈에서 주요 라우팅 정보 정의

forChild()``//기능 모듈(하위 모듈)에 적용

(2) 지연 로딩: loadChildren

여기서 AppModule에 해당 모듈이 추가되지 않았지만 loadChildren 속성은 Angular에게 loadChildren을 기반으로 라우팅하도록 지시하는 데 사용됩니다. code code> 속성으로 구성된 경로는 해당 모듈을 로드하는 데 사용됩니다. 이는 모듈 지연 로딩 기능의 특정 응용 프로그램입니다. 사용자가 /xxx/** 경로에 액세스하면 해당 모듈이 로드되어 응용 프로그램이 시작될 때 로드되는 리소스의 크기가 줄어듭니다. loadChildren의 속성 값은 세 부분으로 구성됩니다.

가져온 모듈의 상대 경로

# 구분 기호 내보낸 모듈 클래스 이름

(3) 사전 로드

지연 로딩의 경우 , 라우팅을 처음으로 모듈을 로드할 때 응답이 지연되는 경우가 있습니다. 이때 사전 로딩 전략을 사용하여 이 문제를 해결할 수 있습니다.

• Angular는

• PreloadAllModules-미리 로드
  NoPreloading-미리 로드 없음(기본값)이라는 두 가지 로딩 전략을 제공합니다.

• RouterModule.forRoo()의 두 번째 매개변수는 구성 옵션 중 하나가 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초 후에 모든 모듈을 사용자 정의합니다.

동일한 수준에서 새 사용자 정의를 생성합니다. app -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());
      }
  }

  app.modules.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 { }

를 삽입합니다. B. 사용자 정의 - 모듈 사전 로드 지정

• 새 selected-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. 하위 경로 생성 단계(생성 지침 없음, 직접 수동)
  • (1) 새 메인 폴더 만들기
  메인 디렉토리
  • main.comComponent.html
  • main.comComponent.scss
  main.comComponent.ts
  • main.module.ts
  main-routing.module.ts
  • main.service .ts
  • 디렉터리 A
  A.comComponent.html

A.comComponent.scss

🎜🎜A.comComponent.ts🎜🎜 🎜🎜디렉토리 B🎜🎜🎜 🎜 B.comComponent.html🎜🎜🎜🎜 🎜🎜B.comComponent.scss🎜🎜🎜🎜🎜🎜B.comComponent.ts🎜🎜🎜🎜🎜🎜🎜 🎜🎜예를 들어, 위의 main.comComponent.html에는 다음과 같은 내용이 있습니다. 하위 뷰를 배치하기 위한 영역(아이디어에 대해 먼저 이야기하겠습니다.) 그런 다음 키 코드를 입력하고 나머지에 대해서는 자세히 설명하지 않습니다.)🎜

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

🎜(1) 메인 폴더 아래에서 라우팅을 구성합니다. Routing.module.ts. 각 구성 요소의 구성 요소(라우팅을 위해 구성해야 하는 구성 요소)를 참조해야 합니다🎜

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!