Mari bercakap tentang memuatkan modul dengan malas dan memaparkan komponennya secara dinamik dalam Angular

Bagaimana cara dengan malas memuatkan modul sudut dan mencipta komponen yang diisytiharkan di dalamnya secara dinamik tanpa penghalaan? Artikel berikut akan memperkenalkan kaedah kepada anda, saya harap ia akan membantu anda!

Persekitaran: Angular 13.x.x

Angular menyokong pemuatan malas modul halaman tertentu melalui penghalaan Pengurangan pertama telah dicapai . Saiz skrin digunakan untuk meningkatkan kelajuan pemuatan skrin pertama Walau bagaimanapun, kaedah penghalaan ini kadangkala tidak dapat memenuhi keperluan. [Tutorial berkaitan yang disyorkan: "tutorial video angularjs"]

Sebagai contoh, selepas mengklik butang, satu baris bar alat akan dipaparkan. Saya tidak mahu komponen bar alat ini dibungkus ke dalam main.js secara lalai, tetapi Komponen dimuatkan secara dinamik dan dipaparkan selepas pengguna mengklik butang.

Kemudian mengapa ia perlu dimuatkan secara dinamik Jika komponen bar alat dimasukkan terus ke dalam komponen halaman sasaran , maka kod dalam komponen bar alat akan dibungkus ke dalam sasaran Modul di mana komponen halaman terletak akan menyebabkan saiz js yang dijana oleh modul di mana komponen halaman sasaran terletak menjadi lebih besar melalui pemuatan malas yang dinamik; komponen bar alat boleh dimuatkan hanya selepas pengguna mengklik butang, supaya komponen halaman pertama boleh dikecilkan saiznya.

Untuk tunjuk cara, buat projek sudut baharu, dan kemudian buat satu. yang baharuToolbarModule Struktur direktori projek adalah seperti yang ditunjukkan dalam rajah

Untuk mencapai Untuk tujuan demonstrasi, saya meletakkan imej hampir 1m base64 dalam templat HTML ToolbarModule, kemudian dirujuk terus AppModule dalam ToolbarModule, dan kemudian dilaksanakan ng build, hasil pelaksanaan adalah seperti yang ditunjukkan dalam rajah

Anda dapat melihat bahawa saiz pembungkusan telah mencapai 1.42mb, yang bermaksud bahawa setiap kali pengguna memuat semula halaman ini, tidak kira sama ada pengguna mengklik butang Tunjukkan Bar Alat atau tidak, kandungan yang berkaitan dengan komponen bar alat akan dimuatkan. yang menyebabkan pembaziran sumber, jadi perkara berikut akan mengalih keluar ToolbarModule daripada AppModule pengisytiharan imports, dan kemudian dengan malas memuatkan komponen bar alat apabila pengguna mengklik klik pertama untuk dipaparkan memuatkan komponen Bar alat

Mula-mula, cipta

dan

baharu, dan isytiharkan ToolbarModuleToolbarComponentToolbarModuleToolbarComponent

modul bar alat dalam

.ts

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

toolbar.component.ts

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

@Component({
    selector: 'toolbar',
    templateUrl: './toolbar.component.html',
    styles: [
        `
    svg {
      width: 64px;
      height: 64px;
    }
    Mari bercakap tentang memuatkan modul dengan malas dan memaparkan komponennya secara dinamik dalam Angular {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
    `,
    ],
})
export class ToolbarComponent implements OnInit {
    constructor() {}

    ngOnInit(): void {}
}

toolbar.component.html

<p>
  <svg><path></path><path></path><path></path></svg>
  <svg>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
    <path></path>
  </svg>
  <mari bercakap tentang memuatkan modul dengan malas dan memaparkan komponennya secara dinamik dalam angular>" alt="">
</mari></p>

Kemudian tulis kod untuk memuatkan modul bar alat dalam pengendali acara klik butang tengah

:

AppComponent

app.component.ts

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

@Component({
    selector: 'root',
    template: `
               <p class="container h-screen flex items-center flex-col w-100 justify-center">
                 <p class="mb-3"
                      [ngClass]="{ hidden: !isToolbarVisible }">
                   <ng-container #toolbar></ng-container>
                 </p>
                 <p>
                   <button (click)="toggleToolbarVisibility()"
                           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{ isToolbarVisible ? &#39;隐藏&#39; : &#39;显示&#39; }}</button>
                   <p class="mt-3">首屏内容</p>
                 </p>
               </p>
             `,
})
export class AppComponent {
    title = &#39;ngx-lazy-load-demo&#39;;
    toolbarLoaded = false;
    isToolbarVisible = false;
    @ViewChild(&#39;toolbar&#39;, { 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(&#39;./toolbar/toolbar.module&#39;);
        const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
        const { injector } = moduleRef;
        const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
            injector,
            ngModuleRef: moduleRef,
        });
    }
}

Kuncinya terletak pada baris 32-42, yang mula-mula mengimport modul dalam

melalui

dinamik, kemudian memanggil import dan meneruskan toolbar.module.ts komponen semasa sebagai induk createNgModuleRef daripada Injector , dengan cara ini, ToolbarModule dibuat seketika dan objek Injector diperoleh Akhirnya, kaedah ToolbarModule objek moduleRef yang diisytiharkan dalam templat html dipanggil untuk mencipta komponen <ng-container></ng-container>. 🎜>ViewContainerRefcreateComponentSekarang mari kita lihat saiz pakej selepas melaksanakan 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,
    });
}

ng build

Anda boleh lihat bahawa saiz skrin pertama tidak seperti keterlaluan seperti pada mulanya, kerana ia tidak berada dalam

dan secara langsung mengimport

dan

diimport ke dalam fail js lain (Lazy Chunk Files apabila AppModule). butang diklik buat kali pertama, fail yang mengandungi fail js AppComponentToolbarModule Sila ambil perhatian bahawa dalam demo gif di bawah, apabila anda mengklik butang ToolbarComponent buat kali pertama, akan ada. menjadi permintaan tambahan untuk fail ToolbarModule dalam alat penyahpepijat rangkaian penyemak imbas 显示ToolbarModule

显示Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: src_app_toolbar_toolbar_module_ts.jsVideo Pengaturcaraan

! !

Atas ialah kandungan terperinci Mari bercakap tentang memuatkan modul dengan malas dan memaparkan komponennya secara dinamik dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!