So verwenden Sie das Angular-Vorspannungsverzögerungsmodul

Dieses Mal zeige ich Ihnen, wie Sie das Angular-Vorspannungsverzögerungsmodul verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie das Angular-Vorspannungsverzögerungsmodul verwenden?

Bei der Verwendung von Route Lazy Loading haben wir vorgestellt, wie man Module zum Teilen von Anwendungen verwendet. Beim Zugriff auf dieses Modul lädt Angular dieses Modul. Aber es dauert ein wenig. Beim ersten Klick kommt es zu einer leichten Verzögerung.

Wir können dies beheben, indem wir Routen vorab laden. Router können verzögerte Module asynchron laden, während der Benutzer mit anderen Teilen interagiert. Dies ermöglicht Benutzern einen schnelleren Zugriff auf verzögerte Module.

In diesem Artikel wird die Vorladefunktion basierend auf dem vorherigen Beispiel hinzugefügt.

Im vorherigen Abschnitt befand sich unsere Root-Routing-Definition in main.routing.ts und wir haben die Root-Routing-Definition in app.module.ts verwendet.

Es ist zu beachten, dass die Home-Komponente im Voraus geladen wird. Wir werden diese Komponente nach dem Systemstart rendern.

Nachdem Angular die Home-Komponente gerendert hat, kann der Benutzer mit der Anwendung interagieren und wir können durch einfache Konfiguration andere Module im Hintergrund vorladen.

Vorabladen aktivieren

Wir stellen eine vorinstallierte Strategie in der forRoot-Funktion bereit.

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

Diese PreloadAllModules-Strategie stammt von @angular/router, daher müssen wir sie ebenfalls importieren.

Maßgeschneiderte Vorladestrategie

Im Router-Paket gibt es zwei vordefinierte Strategien:

1. Kein Vorladen, kein Vorladen

2. Alle Module vorladen, PreloadAllModules

Modul nach 5 Sekunden laden

Sie können jedoch selbst eine benutzerdefinierte Richtlinie definieren. Es ist einfacher als Sie denken. Beispielsweise möchten Sie die verbleibenden Module 5 Sekunden nach der Initialisierung Ihrer App laden.

Sie müssen die Schnittstelle PreloadingStrategy implementieren, und wir definieren eine benutzerdefinierte Strategieklasse von CustomPreloadingStrategy.

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

Ändern Sie dann app.module.ts, um diese benutzerdefinierte Richtlinie zu verwenden. Beachten Sie, dass Sie diese Klasse auch in Props hinzufügen müssen. Um eine Abhängigkeitsinjektion zu erreichen.

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

Sie werden sehen, dass dieser Funktionsbaustein nach 5 Sekunden automatisch geladen wird.

Laden Sie das angegebene Modul

Wir können auch zusätzliche Parameter in der Route definieren, um anzugeben, welche Module vorab geladen werden sollen. Wir verwenden Daten in der Routendefinition, um diese zusätzlichen Daten bereitzustellen.

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 }
];

Anschließend definieren wir eine neue Ladestrategie.

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

Verwenden Sie diese Strategie schließlich in 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 { }

An dieser Stelle können Sie sehen, dass das Modul direkt vorinstalliert ist. Auch wenn Sie auf den Link klicken, erfolgt keine neue Anfrage.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS implementiert eine einfache 24-Stunden-Uhr

ReactJS-Operationsformularauswahl

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Angular-Vorspannungsverzögerungsmodul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!