Шаблонът на компонента не винаги ще бъде фиксиран. Вашето приложение може да се наложи да зареди някои нови компоненти по време на изпълнение.
Сценарии на употреба:
1. Зареждането на страница зарежда различни компоненти според различни параметри, показвайки различни ефекти
2. Страницата се състои от множество елементи, не всички трябва да се показват в началото, а специфична информация ще се показва след кликване на потребителя, като: табове, динамични модални кутии и др.
Сценарият на употреба на тази статия е 2, само си представете,Ако не използвате динамично зареждане, когато отворите основния интерфейс, всички скрити компоненти на страницата ще бъдат заредени и всички компоненти ще извикат съответните си интерфейсни услуги, често не е нужно да виждаме цялата информация, което е голяма загуба на ресурси и може да доведе до бавно зареждане на основния интерфейс, което влияе на потребителското изживяване。
Има два начина за динамично зареждане на компоненти в ng:
Заредете вече декларираните компоненти: Използвайте ComponentFactoryResolver, за да рендерирате инстанция на компонент в друг изглед на компонент;
Създаване и зареждане на компоненти динамично: Използвайте ComponentFactory и Compiler за създаване и рендериране на компоненти
Според нашите нужди, отделните компоненти се разработват предварително и трябва да бъдат изложени на един и същ компонент. Първият начин отговаря на нашите изисквания.
За да зареждате компоненти динамично чрез ComponentFactoryResolver, трябва да разберете следните концепции:
- ViewChild: Декоратор на имоти, чрез който можете да получите съответните елементи на изгледа;
- ViewContainerRef: Контейнер за изглед, върху който могат да се създават и изтриват компоненти;
- ComponentFactoryResolver: Парсер на компоненти, който може да рендерира един компонент върху изглед на друг.
Първо, нека разгледаме рендеризациите, кликнете върху бутона modal1, за да заредите динамично компонента modal1, и натиснете бутона modal2, за да заредите динамично компонента modal2.
Първо създаваме ъглов проект.
Създам 4 компонента, а именно index, modal1, modal2 и modal3, от които modal1 и modal2 са нашите динамично заредени компоненти.
Индексен компонент
html:
ts:
Компонент modal1
html:
ts:
Компонент modal2
html:
ts:
Компонент modal3
html:
ts:
Отпечатахме имената им върху конструктора за 3 модала.
Modal1 и Modal2 се зареждат динамично, само когато бутонът се натисне за зареждане, конструкторът за изпълнение се задейства, Modal3 не използва динамично зареждане, след като родителският интерфейс се зареди, конструкторът на интерфейса Modal3 се изпълнява веднага.
По този начин можете да видите предимствата на динамичното зареждане и то няма да се зареди, ако не го използвате, подобно на мързеливо зареждане в C#.
Изтегляне на изходния код:
Туристи, ако искате да видите скритото съдържание на този пост, моля Отговор
Ресурси:Входът към хиперлинк е видим.
|
Публикувано в 29.05.2020 г. 16:40:00 ч.
|
|
|
|
Хазяин|
Публикувано в 24.07.2020 г. 17:52:58 ч.
|
Публикувано в 26.10.2022 г. 17:27:19 ч.
|
