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:

• Die grundlegendste Bedeutung von NgModule besteht darin, Entwicklern dabei zu helfen, Geschäftscode zu organisieren, was oberste Priorität hat.
• NgModule wird verwendet, um zu steuern, ob Komponenten, Anweisungen, Pipes usw. verwendet werden können. Komponenten im selben NgModule sind standardmäßig füreinander sichtbar, während bei externen Komponenten nur die von NgModule exportierten Inhalte sichtbar sind Das heißt, wenn das von Ihnen definierte NgModule keine Inhalte exportiert, können externe Benutzer keine darin definierten Inhalte verwenden, selbst wenn sie Ihr Modul importieren.
• NgModule ist die kleinste Einheit, die beim Packen verwendet wird. Beim Packen werden alle @NgModule- und Routing-Konfigurationen überprüft. Die unterste Ebene von Angular wird mit Webpack gepackt. Da Angular das Webpack bereits für uns konfiguriert hat, ist es für Entwickler viel einfacher, andernfalls müssen sie die Umgebung selbst konfigurieren.
• NgModule ist die kleinste Einheit, die der Router asynchron laden kann. Die kleinste Einheit, die der Router laden kann, ist ein Modul, keine Komponente. Natürlich ist es erlaubt, nur eine Komponente in einem Modul zu platzieren, und viele Komponentenbibliotheken tun dies. [Verwandte Tutorial-Empfehlungen: „Angular-Tutorial“]

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的属性值由三部分组成：

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

（3）预加载

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

Angular提供了两种加载策略，

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

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

(2) Lazy Loading: LoadChildren

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:

Der relative Pfad des importierten Moduls

#-Trennzeichen

Der Name der exportierten Modulklasse

(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).

Der 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.

A Alle Module nach 5 Sekunden benutzerdefiniert laden.

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

Injizieren Sie

• 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

Erstellen Sie eine neue Datei „selective-preloading-strategy.ts“ auf derselben Ebene wie die App wird erstellt (Sie müssen die Anbieter in app-routing.module.ts einfügen und dann die in der Route definierten Daten über zusätzliche Parameter festlegen, um festzulegen, ob vorab geladen werden soll)

• 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 (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)

  (1) Erstellen Sie einen neuen Hauptordner
  Verzeichnis main
  • main.component.html
  • main.component.scss
  main.component.ts
  • main.modul.ts
  main-routing.module.ts
  • main.service .ts
  Verzeichnis B
  • B.component.html
  • b.component.scss

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!