Heim > Artikel > Web-Frontend > Eine kurze Diskussion über die Vorladekonfiguration und die Lazy-Loading-Konfiguration in Angular
In diesem Artikel erfahren Sie mehr über die Routing-Konfiguration in Angular und stellen die Preload-Konfiguration und die Lazy-Loading-Konfiguration kurz vor. Ich hoffe, dass er für alle hilfreich ist!
NgModule ist der Kern des Angular-Moduls. Lassen Sie uns zuerst darüber sprechen.
1. Die Rolle von @NgModule:
2. @NgModule-Strukturbeschreibung:
@NgModule({ declarations: [], //属于当前模块的组件、指令及管道 imports: [], //当前模板所依赖的项,即外部模块(包括httpModule、路由等) export:[],//声明出应用给其他的module使用 providers: [], //注入服务到当前模块 bootstrap: []//默认启动哪个组件(只有根模块才能设置bootstrap属性) })
3. Das Code>-Objekt stellt zwei statische Methoden bereit: forRoot()
und forChild()
zum Konfigurieren von Routing-Informationen.
forRoot()//Definieren Sie die Hauptrouting-Informationen im Hauptmodul
forChild()``//
Anwenden im Funktionsmodul (Untermodul) RouterModule
对象提供了两个静态的方法:forRoot()
和forChild()
来配置路由信息。
forRoot()//在主模块中定义主要的路由信息
forChild()``//
应用在特性模块(子模块)中(2)懒加载:loadChildren
此处并没有将对应的模块加入到AppModule中,而是通过loadChildren
属性,告诉Angular路由依据loadChildren
属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用,当用户访问 /xxx/** 路径的时候,才会加载对应的模块,这减少了应用启动时加载资源的大小。 loadChildren的属性值由三部分组成:
(3)预加载
在使用懒加载的情况下,路由第一次加载某个模块时,有时反应有延迟。这时就可以用预加载策略来解决这个问题。
Angular提供了两种加载策略,
PreloadAllModules
-预加载NoPreloading
-没有预加载(默认)。RouterModule.forRoo()
的第二个参数
可以添加配置选项,配置选项中就有一个是preloadingStrategy
Das entsprechende Modul wird hier nicht zum AppModule hinzugefügt, aber das Attribut loadChildren
wird verwendet, um Angular anzuweisen, basierend auf loadChildren zu routen. Der durch das Attribut code> konfigurierte Pfad wird zum Laden des entsprechenden Moduls verwendet. Dies ist die spezifische Anwendung der Modul-Lazy-Loading-Funktion. Wenn der Benutzer auf den Pfad /xxx/** zugreift, wird das entsprechende Modul geladen, wodurch die Größe der geladenen Ressourcen beim Start der Anwendung reduziert wird. Der Attributwert von LoadChildren besteht aus drei Teilen:
(3) Vorladen Im Fall von Lazy Loading , Wenn das Routing ein Modul zum ersten Mal lädt, kommt es manchmal zu einer Verzögerung der Antwort. Zu diesem Zeitpunkt können Sie die Vorladestrategie verwenden, um dieses Problem zu lösen.
Angular bietet zwei Ladestrategien:
PreloadAllModules
-Vorladen NoPreloading
-kein Vorladen (Standard).
zweite Parameter
von RouterModule.forRoo()
kann Konfigurationsoptionen hinzufügen. Eine der Konfigurationsoptionen ist die preloadingStrategy
-Konfiguration ist eine vorinstallierte Richtlinienkonfiguration. //使用默认预加载-预加载全部模块 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 { }
Wir ziehen es jedoch vor, das Vorladen von Modulen selbst zu steuern.
Erstellen Sie einen neuen benutzerdefinierten Wert auf derselben Ebene wie app -preloading-strategy.ts-Datei
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 { }
in die Anbieter von app.modules.ts B. Anpassen – Vorladen des Moduls angeben
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['preload']) { return load(); } else { return Observable.of(null); } } }
app-routing.module.ts (Verzögertes Laden dieser Datei ähnelt dem Vorladen von Combined)
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. Schritte zur Erstellung von Unterrouten (keine Anweisungen zum Erstellen, direkt manuell)
b.component.ts
🎜🎜 FORE BEIL IN Main.comPonent.html oben gibt es eine Bereich zum Platzieren von Unteransichten (ich werde zuerst über die Ideen sprechen und dann den Schlüsselcode eingeben, auf den Rest werde ich nicht näher eingehen)🎜<div>下面的区域是另一个路由出口</div> <router-outlet></router-outlet><!--此处依照下面的路由配置,默认显示AComponent组件的内容-->🎜(1) Konfigurieren Sie das Routing unter dem Ordner main in main-. Routing.module.ts. Sie müssen auf die Komponenten jeder Komponente verweisen (die Komponenten, die für das Routing konfiguriert werden müssen)🎜
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 wird im Allgemeinen zum Platzieren von HTTP-Anfragen verwendet🎜
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{ }
更多编程相关知识,请访问:编程视频!!
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Vorladekonfiguration und die Lazy-Loading-Konfiguration in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!