99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

本文小編為大家詳細(xì)介紹“Angular中怎么懶加載模塊并動態(tài)顯示它的組件”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Angular中怎么懶加載模塊并動態(tài)顯示它的組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供武陵源網(wǎng)站建設(shè)、武陵源做網(wǎng)站、武陵源網(wǎng)站設(shè)計(jì)、武陵源網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、武陵源企業(yè)網(wǎng)站模板建站服務(wù)，十多年武陵源做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

angular中支持可以通過路由來懶加載某些頁面模塊已達(dá)到減少首屏尺寸, 提高首屏加載速度的目的. 但是這種通過路由的方式有時候是無法滿足需求的。

比如, 點(diǎn)擊一個按鈕后顯示一行工具欄, 這個工具欄組件我不希望它默認(rèn)打包進(jìn)main.js, 而是用戶點(diǎn)按鈕后動態(tài)把組件加載并顯示出來.

那為什么要動態(tài)加載呢? 如果直接在目標(biāo)頁面組件引入工具欄組件, 那么工具欄組件中的代碼就會被打包進(jìn)目標(biāo)頁面組件所在的模塊, 這會導(dǎo)致目標(biāo)頁面組件所在的模塊生成的js體積變大; 通過動態(tài)懶加載的方式, 可以讓工具欄組件只在用戶點(diǎn)了按鈕后再加載, 這樣就可以達(dá)到減少首屏尺寸的目的.

為了演示, 新建一個angular項(xiàng)目, 然后再新建一個ToolbarModule, 項(xiàng)目的目錄結(jié)構(gòu)如圖

為了達(dá)到演示的目的, 我在ToolbarModule的html模板中放了個將近1m的base64圖片, 然后直接在AppModule中引用ToolbarModule, 然后執(zhí)行ng build, 執(zhí)行結(jié)果如圖

可以看到打包尺寸到達(dá)了1.42mb, 也就是說用戶每次刷新這個頁面, 不管用戶有沒有點(diǎn)擊顯示工具欄按鈕, 工具欄組件相關(guān)的內(nèi)容都會被加載出來, 這造成了資源的浪費(fèi), 所以下面將ToolbarModule從AppModule的imports聲明中移除, 然后在用戶點(diǎn)擊首次點(diǎn)擊顯示時懶加載工具欄組件.

懶加載工具欄組件

首先, 新建一個ToolbarModule和ToolbarComponent, 并在ToolbarModule聲明ToolbarComponent

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToolbarComponent } from './toolbar.component';
 
@NgModule({
    declarations: [ToolbarComponent],
    imports: [CommonModule],
    exports: [ToolbarComponent],
})
class ToolbarModule {}
 
export { ToolbarComponent, ToolbarModule };

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'toolbar',
    templateUrl: './toolbar.component.html',
    styles: [
        `
    svg {
      width: 64px;
      height: 64px;
    }
    img {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
    `,
    ],
})
export class ToolbarComponent implements OnInit {
    constructor() {}

    ngOnInit(): void {}
}

  
  
    
    
    
    
    
  
  " alt="">

然后再AppComponent的中按鈕點(diǎn)擊事件處理程序中寫加載工具欄模塊的代碼:

import { Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'root',
    template: `
               
                 
                   
                 

                 

                   {{ isToolbarVisible ? '隱藏' : '顯示' }}
                   首屏內(nèi)容
                 

               

             `,
})
export class AppComponent {
    title = 'ngx-lazy-load-demo';
    toolbarLoaded = false;
    isToolbarVisible = false;
    @ViewChild('toolbar', { read: ViewContainerRef }) toolbarViewRef!: ViewContainerRef;

    constructor(private _injector: Injector) {}

    toggleToolbarVisibility() {
        this.isToolbarVisible = !this.isToolbarVisible;
        this.loadToolbarModule().then();
    }

    private async loadToolbarModule() {
        if (this.toolbarLoaded) return;
        this.toolbarLoaded = true;
        const { ToolbarModule, ToolbarComponent } = await import('./toolbar/toolbar.module');
        const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
        const { injector } = moduleRef;
        const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
            injector,
            ngModuleRef: moduleRef,
        });
    }
}

關(guān)鍵在于其中的第32-42行, 首先通過一個動態(tài)import導(dǎo)入toolbar.module.ts中的模塊, 然后調(diào)用createNgModuleRef并傳入當(dāng)前組件的Injector作為ToolbarModule的父級Injector, 這樣就實(shí)例化了ToolbarModule得到了moduleRef對象, 最后就是調(diào)用html模板中聲明的的ViewContainerRef對象的createComponent方法創(chuàng)建ToolbarComponent組件

private async loadToolbarModule() {
    if (this.toolbarLoaded) return;
    this.toolbarLoaded = true;
    const { ToolbarModule, ToolbarComponent } = await import('./toolbar/toolbar.module');
    const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
    const { injector } = moduleRef;
    const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
        injector,
        ngModuleRef: moduleRef,
    });
}

此時再來看下這番操作后執(zhí)行ng build打包的尺寸大小

可以看到首屏尺寸沒有開頭那么離譜了, 原因是沒有在AppModule和AppComponent直接導(dǎo)入ToolbarModule和ToolbarComponent, ToolbarModule被打進(jìn)了另外的js文件中(Lazy Chunk Files), 當(dāng)首次點(diǎn)擊顯示按鈕時, 就會加載這個包含ToolbarModule的js文件

注意看下面的gif演示中, 首次點(diǎn)擊顯示按鈕, 瀏覽器網(wǎng)絡(luò)調(diào)試工具中會多出一個對src_app_toolbar_toolbar_module_ts.js文件的請求

讀到這里，這篇“Angular中怎么懶加載模塊并動態(tài)顯示它的組件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。