Angular implementiert die Beispielfreigabe für das Vorladen-Verzögerungsmodul

In diesem Artikel wird hauptsächlich das Beispiel der Implementierung eines vorinstallierten Verzögerungsmoduls in Angular vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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 dieses Problem 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 wurde unsere Root-Route in main.routing.ts definiert und wir haben die Root-Route-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. Durch einfache Konfiguration können wir andere Module im Hintergrund vorladen.

Vorabladen aktivieren

Wir bieten eine Vorabladestrategie in der forRoot-Funktion.

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 auch importieren.

Maßgeschneiderte Vorladestrategie

Es gibt zwei vordefinierte Strategien im Router-Paket:

1. Kein Vorladen

2. Alle Module vorab laden PreloadAllModules

Module nach 5 Sekunden laden

Sie können jedoch selbst eine individuelle Strategie 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. 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 Strategie zu verwenden. Beachten Sie, dass Sie diese Klasse auch in Props hinzufügen müssen. um die Abhängigkeitsinjektion zu implementieren.

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

Verwandte Empfehlungen:

Detaillierte Erklärung, wie Laravel Modellabfragen durch Vorladen optimiert

Erläuterung des Codes zum Implementieren vorinstallierter Animationseffekte einfach mit CSS

JS zum Implementieren des Bildvorladefunktionscodes außer Betrieb

Das obige ist der detaillierte Inhalt vonAngular implementiert die Beispielfreigabe für das Vorladen-Verzögerungsmodul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!