Rumah hujung hadapan web tutorial js angular6.0做出懒加载

angular6.0做出懒加载

Jun 08, 2018 pm 02:07 PM
angular Malas memuatkan Pemuatan komponen yang malas

这次给大家带来angular6.0做出懒加载,angular6.0做出懒加载的注意事项有哪些,下面就是实战案例,一起来看一下。

我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪。又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能。或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间。一切都在用户不知不觉中进行。大大增加用户体验,特别是中大型项目,优化必备!

项目地址github

安装

yarn add iwe7-lazy-load
Salin selepas log masuk

使用

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 {}
Salin selepas log masuk
<p #ele>
 <lazy-test></lazy-test>
</p>
Salin selepas log masuk
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);
}
Salin selepas log masuk

定义懒加载组件 demo

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;
 }
}
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

angular打印页面指定功能

React内render案例详解

Atas ialah kandungan terperinci angular6.0做出懒加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memasang Angular pada Ubuntu 24.04 Bagaimana untuk memasang Angular pada Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js ialah platform JavaScript yang boleh diakses secara bebas untuk mencipta aplikasi dinamik. Ia membolehkan anda menyatakan pelbagai aspek aplikasi anda dengan cepat dan jelas dengan memanjangkan sintaks HTML sebagai bahasa templat. Angular.js menyediakan pelbagai alatan untuk membantu anda menulis, mengemas kini dan menguji kod anda. Selain itu, ia menyediakan banyak ciri seperti penghalaan dan pengurusan borang. Panduan ini akan membincangkan cara memasang Angular pada Ubuntu24. Mula-mula, anda perlu memasang Node.js. Node.js ialah persekitaran berjalan JavaScript berdasarkan enjin ChromeV8 yang membolehkan anda menjalankan kod JavaScript pada bahagian pelayan. Untuk berada di Ub

Analisis ringkas tentang cara menggunakan editor monaco dalam sudut Analisis ringkas tentang cara menggunakan editor monaco dalam sudut Oct 17, 2022 pm 08:04 PM

Bagaimana untuk menggunakan monaco-editor dalam sudut? Artikel berikut merekodkan penggunaan monaco-editor dalam sudut yang digunakan dalam perniagaan baru-baru ini. Saya harap ia akan membantu semua orang!

Artikel yang meneroka pemaparan sisi pelayan (SSR) dalam Angular Artikel yang meneroka pemaparan sisi pelayan (SSR) dalam Angular Dec 27, 2022 pm 07:24 PM

Adakah anda tahu Angular Universal? Ia boleh membantu tapak web menyediakan sokongan SEO yang lebih baik!

Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut Sep 08, 2022 pm 08:29 PM

Bagaimana untuk menyesuaikan format angular-datetime-picker? Artikel berikut membincangkan cara menyesuaikan format saya harap ia akan membantu semua orang!

Komponen sudut dan sifat paparannya: memahami lalai bukan blok Komponen sudut dan sifat paparannya: memahami lalai bukan blok Mar 15, 2024 pm 04:51 PM

Tingkah laku paparan lalai untuk komponen dalam rangka kerja Angular bukan untuk elemen peringkat blok. Pilihan reka bentuk ini menggalakkan pengkapsulan gaya komponen dan menggalakkan pembangun untuk secara sedar menentukan cara setiap komponen dipaparkan. Dengan menetapkan paparan sifat CSS secara eksplisit, paparan komponen Sudut boleh dikawal sepenuhnya untuk mencapai reka letak dan responsif yang diingini.

Bagaimanakah Vue melaksanakan pemuatan malas dan pramuat komponen? Bagaimanakah Vue melaksanakan pemuatan malas dan pramuat komponen? Jun 27, 2023 pm 03:24 PM

Apabila aplikasi web menjadi semakin kompleks, pembangun bahagian hadapan perlu menyediakan kefungsian dan pengalaman pengguna dengan lebih baik sambil memastikan kelajuan memuatkan halaman. Ini melibatkan pemuatan malas dan pramuat komponen Vue, yang merupakan cara penting untuk mengoptimumkan prestasi aplikasi Vue. Artikel ini akan memberikan pengenalan yang mendalam tentang kaedah pelaksanaan pemuatan malas dan pramuat komponen Vue. 1. Apakah lazy loading? Lazy loading bermaksud kod sesuatu komponen hanya akan dimuatkan apabila pengguna perlu mengaksesnya, bukannya memuatkan kod semua komponen pada mulanya

Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular Dec 02, 2022 pm 09:14 PM

Artikel ini akan membawa anda melalui suntikan pergantungan, memperkenalkan masalah yang diselesaikan oleh suntikan pergantungan dan kaedah penulisan asalnya, dan bercakap tentang rangka kerja suntikan pergantungan Angular saya harap ia akan membantu semua orang.

Penjelasan terperinci tentang fungsi malas dalam Vue3: Pemuatan malas komponen meningkatkan prestasi aplikasi Penjelasan terperinci tentang fungsi malas dalam Vue3: Pemuatan malas komponen meningkatkan prestasi aplikasi Jun 19, 2023 am 08:39 AM

Vue3 ialah rangka kerja JavaScript yang popular yang mudah dipelajari dan digunakan, cekap dan stabil, serta sangat baik dalam membina aplikasi satu halaman (SPA). Fungsi malas dalam Vue3, sebagai salah satu alat berkuasa untuk memuatkan komponen yang malas, boleh meningkatkan prestasi aplikasi dengan banyak. Artikel ini akan menerangkan secara terperinci penggunaan dan prinsip fungsi malas dalam Vue3, serta senario aplikasi dan kelebihannya dalam pembangunan sebenar. Apakah malas memuatkan? Dalam pembangunan front-end dan back-end tradisional, pembangun front-end selalunya perlu berurusan dengan sejumlah besar

See all articles