Bir bileşenin şablonu her zaman sabit olmayacaktır. Uygulamanızın çalışma zamanı sırasında bazı yeni bileşenleri yüklemesi gerekebilir.
Kullanım Senaryoları:
1. Sayfa yükleme, farklı parametrelere göre farklı bileşenleri yükler ve farklı etkiler gösterir
2. Sayfa birden fazla öğeden oluşur, hepsinin başta görüntülenmesi gerekmez ve kullanıcı tıkladıktan sonra belirli bilgiler gösterilir, örneğin: sekme sekmeleri, dinamik açılır modal kutular vb.
Bu makalenin kullanım senaryosu 2, hayal edin,Dinamik yükleme kullanmazsanız, ana arayüzü açtığınızda sayfanın tüm gizli bileşenleri yüklenir ve tüm bileşenler ilgili arayüz hizmetlerini çağırır, çoğu zaman tüm bilgileri görmemize gerek kalmaz, bu büyük bir kaynak israfıdır ve ana arayüzün yavaş yüklenmesine neden olabilir, bu da kullanıcı deneyimini etkileyebilir。
ng'de bileşenleri dinamik olarak yüklemenin iki yolu vardır:
Zaten bildirilen bileşenleri yükleyin: ComponentFactoryResolver kullanarak bir bileşenin örneğini başka bir bileşen görünümüne render edin;
Bileşenleri dinamik olarak oluşturun ve yükleyin: Bileşenleri oluşturmak ve renderlemek için ComponentFactory ve Derleyici kullanın
İhtiyaçlarımıza göre, bireysel bileşenler önceden geliştirilir ve aynı bileşende sergilenmesi gerekir. Yani ilk yol bizim gereksinimlerimizi karşılıyor.
ComponentFactoryResolver kullanarak bileşenleri dinamik olarak yüklemek için aşağıdaki kavramları anlamanız gerekir:
- ViewChild: Özellik dekoratörü, böylece görünüme karşılık gelen öğeleri elde edebilirsiniz;
- ViewContainerRef: Bileşenlerin oluşturulup silinebileceği bir görünüm konteyneri;
- ComponentFactoryResolver: Bir bileşeni diğerinin görünümünde render edebilen bir bileşen ayrıştırıcıdır.
Öncelikle, renderasyonlara bakalım, modal1 bileşenini dinamik olarak yüklemek için modal1 düğmesine tıklayalım ve modal2 bileşenini dinamik olarak yüklemek için modal2 düğmesine tıklayalım.
İlk olarak, açısal bir proje oluşturuyoruz.
4 bileşen oluşturun: index, modal1, modal2 ve modal3; bunlardan modal1 ve modal2 dinamik olarak yüklenmiş bileşenlerimizdir.
Endeks bileşeni
html:
TS:
modal1 bileşeni
html:
TS:
modal2 bileşeni
html:
TS:
modal3 bileşeni
html:
TS:
Yapımcıya isimlerini 3 modal için bastık.
modal1 ve modal2 dinamik olarak yüklenir, ancak yükleme düğmesine tıklandığında yürütme oluşturucu tetiklenir, modal3 dinamik yükleme kullanmaz, ana arayüz yüklendikten sonra modal3 arayüz oluşturucu hemen çalıştırılır.
Bu şekilde, dinamik yüklemenin avantajlarını görebilirsiniz ve kullanmazsanız yükleme yüklenmez, tıpkı C#'daki tembel yüklemeye benzer.
Kaynak kodu indirme:
Turistler, bu gönderinin gizli içeriğini görmek isterseniz lütfen Yanıt
Kaynaklar:Bağlantı girişi görünür.
| 
Yayınlandı 29.05.2020 16:40:00
|
|
|
|
Ev sahibi|
Yayınlandı 24.07.2020 17:52:58
|
Yayınlandı 26.10.2022 17:27:19
|
