Templat komponen tidak akan selalu diperbaiki. Aplikasi Anda mungkin perlu memuat beberapa komponen baru selama runtime.
Skenario Penggunaan:
1. Pemuatan halaman memuat komponen yang berbeda sesuai dengan parameter yang berbeda, menunjukkan efek yang berbeda
2. Halaman terdiri dari beberapa elemen, tidak semuanya perlu ditampilkan di awal, dan informasi spesifik akan ditampilkan setelah pengguna mengklik, seperti: tab tab, kotak modal pop-up dinamis, dll.
Skenario penggunaan artikel ini adalah 2, bayangkan saja,Jika Anda tidak menggunakan pemuatan dinamis, saat Anda membuka antarmuka utama, semua komponen tersembunyi halaman akan dimuat, dan semua komponen memanggil layanan antarmuka yang sesuai, seringkali, kita tidak perlu melihat semua informasi, yang merupakan pemborosan sumber daya yang besar, dan juga dapat menyebabkan antarmuka utama dimuat dengan lambat, memengaruhi pengalaman pengguna。
Ada dua cara untuk memuat komponen secara dinamis di ng:
Muat komponen yang sudah dideklarasikan: Gunakan ComponentFactoryResolver untuk merender instans komponen ke tampilan komponen lain;
Membuat dan memuat komponen secara dinamis: Menggunakan ComponentFactory dan Compiler untuk membuat dan merender komponen
Sesuai dengan kebutuhan kami, masing-masing komponen dikembangkan terlebih dahulu dan perlu ditampilkan pada komponen yang sama. Jadi cara pertama memenuhi persyaratan kami.
Untuk memuat komponen secara dinamis menggunakan ComponentFactoryResolver, Anda perlu memahami konsep berikut:
- ViewChild: Dekorator properti, di mana Anda bisa mendapatkan elemen yang sesuai pada tampilan;
- ViewContainerRef: Kontainer tampilan tempat komponen dapat dibuat dan dihapus;
- ComponentFactoryResolver: Parser komponen yang dapat merender satu komponen pada tampilan komponen lainnya.
Pertama, mari kita lihat rendering, klik tombol modal1 untuk memuat komponen modal1 secara dinamis, dan klik tombol modal2 untuk memuat komponen modal2 secara dinamis.
Pertama, kita membuat proyek sudut.
Buat 4 komponen, yaitu index, modal1, modal2, dan modal3, di mana modal1 dan modal2 adalah komponen kita yang dimuat secara dinamis.
komponen indeks
html:
Catatan:
komponen modal1
html:
Catatan:
komponen modal2
html:
Catatan:
komponen modal3
html:
Catatan:
Kami mencetak nama mereka pada konstruktor untuk 3 modal.
modal1 dan modal2 keduanya dimuat secara dinamis, hanya ketika tombol diklik untuk memuat, konstruktor eksekusi akan dipicu, modal3 tidak menggunakan pemuatan dinamis, setelah antarmuka induk dimuat, konstruktor antarmuka modal3 akan segera dieksekusi.
Dengan cara ini, Anda dapat melihat keuntungan pemuatan dinamis, dan tidak akan dimuat jika Anda tidak menggunakannya, mirip dengan pemuatan lambat di C#.
Unduhan kode sumber:
Wisatawan, jika Anda ingin melihat konten tersembunyi dari posting ini, silakan Jawab
Sumber daya:Login hyperlink terlihat.
|
Diposting pada 29/05/2020 16.40.00
|
|
|
|
Tuan tanah|
Diposting pada 24/07/2020 17.52.58
|
Diposting pada 26/10/2022 17.27.19
|
