Heim  >  Artikel  >  Web-Frontend  >  Angular6.0 implementiert die Funktion zum verzögerten Laden von Komponenten (mit Code)

Angular6.0 implementiert die Funktion zum verzögerten Laden von Komponenten (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-04-28 14:00:572674Durchsuche

Dieses Mal werde ich Ihnen die Lazy-Loading-Funktion von Angular6.0 (mit Code) vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der Lazy-Loading-Funktion von Angular6.0? Ein praktischer Fall, schauen wir uns das einmal an.

Wir stoßen oft auf ein solches Problem, wenn wir eine Steuerungsbibliothek eines Drittanbieters verwenden, verwenden wir nur eine oder wenige Komponenten, was viele nutzlose Dinge mit sich bringt, was zu einer zu großen Lautstärke führt. Oder die Homepage verwendet viele Komponenten und die Ladegeschwindigkeit der Homepage ist langsam. Zu diesem Zeitpunkt müssen wir möglicherweise die im visuellen Bereich des Benutzers verwendeten Komponenten laden. Während der Benutzer nach unten scrollt, laden wir diese Komponenten erneut und laden sie schrittweise . Progressive Erfahrung, zu diesem Zeitpunkt können Sie die von diesem Tool implementierten Funktionen nutzen. Oder einige unwichtige Bereiche einer Seite, wie z. B. Werbung von Drittanbietern oder unwichtige Elemente, können Lazy Loading und Lazy Rendering nutzen, um die Wartezeit des Benutzers auf den ersten Bildschirm zu verkürzen. Alles geschieht, ohne dass der Benutzer es merkt. Verbessert die Benutzererfahrung erheblich, insbesondere bei mittleren und großen Projekten ist eine Optimierung ein Muss!

Projektadresse Github

Installieren

yarn add iwe7-lazy-load

Verwenden Sie

import { Iwe7LazyLoadModule, LazyComponentsInterface } from 'iwe7-lazy-load';
// 用到的懒加载组件
let lazyComponentsModule: LazyComponentsInterface[] = [
 {
 // 组件的selector
 path: 'lazy-test',
 // 组件的相对地址
 loadChildren: './lazy-test/lazy-test.module#LazyTestModule'
 }
];
@NgModule({
 imports: [Iwe7LazyLoadModule.forRoot(lazyComponentsModule)],
 // 注意加上这些
 schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
export class AppModule {}
<p #ele>
 <lazy-test></lazy-test>
</p>
import { LazyLoaderService } from 'iwe7-lazy-load';
@ViewChild('ele') ele: ElementRef;
constructor(
 public lazyLoader: LazyLoaderService,
 public view: ViewContainerRef
) {}
ngOnInit() {
 // 开始渲染懒组件
 this.lazyLoader.init(this.ele.nativeElement, this.view);
}

, um eine Lazy-Loading-Komponenten-Demo zu definieren

import { LazyComponentModuleBase } from 'iwe7-lazy-load';
@Component({
 selector: 'lazy-test',
 template: ` i am a lazy`
})
export class LazyTestComponent {}
@NgModule({
 imports: [
 RouterModule.forChild([{
  path: '',
  component: LazyTestComponent
 }])
 ],
 declarations: [LazyTestComponent]
})
export class LazyTestModule extends LazyComponentModuleBase {
 getComponentByName(key: string): Type<any> {
 return LazyTestComponent;
 }
}

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:

jQuery-Codierungskonvertierung Base64-Upload über AJAX

Vue-Komponentenschreibspezifikation

Das obige ist der detaillierte Inhalt vonAngular6.0 implementiert die Funktion zum verzögerten Laden von Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn