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 class="flex">
  <svg t="1652618923451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2104" width="200" height="200"><path d="M412 618m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2105"></path><path d="M673.19 393h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM600.89 235H423.11C367.91 235 323 190.28 323 135.32v-12.5a25 25 0 0 1 50 0v12.5c0 27.39 22.48 49.68 50.11 49.68h177.78c27.63 0 50.11-22.29 50.11-49.68v-16.5a25 25 0 1 1 50 0v16.5c0 54.96-44.91 99.68-100.11 99.68zM673.19 585.5h-333a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM467 778H340a25 25 0 0 1 0-50h127a25 25 0 0 1 0 50z" fill="#087E6A" p-id="2106"></path><path d="M739.76 952H273.62a125.14 125.14 0 0 1-125-125V197a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM273.62 122a75.08 75.08 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V197a75.08 75.08 0 0 0-75-75z" fill="#087E6A" p-id="2107"></path></svg>
  <svg t="1652618941842"
       class="icon"
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       p-id="2247"
       width="200"
       height="200">
    <path d="M415 624m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z"
          fill="#C9F4EB"
          p-id="2248"></path>
    <path d="M695 790H362a25 25 0 0 1 0-50h333a25 25 0 0 1 0 50zM583 649H362a25 25 0 0 1 0-50h221a25 25 0 0 1 0 50zM262 287H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 455.33H129a25 25 0 1 1 0-50h133a25 25 0 0 1 0 50zM262 623.67H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50zM262 792H129a25 25 0 0 1 0-50h133a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2249"></path>
    <path d="M761.76 964H295.62a125.14 125.14 0 0 1-125-125V209a125.14 125.14 0 0 1 125-125h466.14a125.14 125.14 0 0 1 125 125v630a125.14 125.14 0 0 1-125 125zM295.62 134a75.09 75.09 0 0 0-75 75v630a75.08 75.08 0 0 0 75 75h466.14a75.08 75.08 0 0 0 75-75V209a75.09 75.09 0 0 0-75-75z"
          fill="#087E6A"
          p-id="2250"></path>
    <path d="M617 376H443a25 25 0 0 1 0-50h174a25 25 0 0 1 0 50z"
          fill="#087E6A"
          p-id="2251"></path>
    <path d="M530 463a25 25 0 0 1-25-25V264a25 25 0 0 1 50 0v174a25 25 0 0 1-25 25z"
          fill="#087E6A"
          p-id="2252"></path>
  </svg>
  <Mari bercakap tentang memuatkan modul dengan malas dan memaparkan komponennya secara dinamik dalam Angular src="<这里应该是一张大小将近1M的base64图片, 内容较大, 就略去了...>" alt="">
</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 #toolbar></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!