Шаблон компонента не завжди буде фіксованим. Можливо, вашому додатку потрібно буде завантажити деякі нові компоненти під час виконання.
Сценарії використання:
1. Завантаження сторінки завантажує різні компоненти за різними параметрами, показуючи різні ефекти
2. Сторінка складається з кількох елементів, не всі з них потрібно відображати на початку, і після кліків користувача відображається конкретна інформація, наприклад: вкладки вкладок, динамічні модальні вікна тощо.
Сценарій використання цієї статті такий: 2, уявіть собі,Якщо ви не використовуєте динамічне завантаження, коли відкриваєте основний інтерфейс, всі приховані компоненти сторінки будуть завантажені, і всі компоненти викликають відповідні інтерфейсні сервіси, часто нам не потрібно бачити всю інформацію, що є великою марнотратністю ресурсів і може призвести до повільного завантаження основного інтерфейсу, що впливає на користувацький досвід。
Існує два способи динамічного завантаження компонентів у ng:
Завантажити вже оголошені компоненти: Використовуйте ComponentFactoryResolver для рендерингу екземпляра компонента в інший вигляд компонента;
Створюйте та завантажуйте компоненти динамічно: використовуйте ComponentFactory та компілятор для створення та рендерингу компонентів
Відповідно до наших потреб, окремі компоненти розробляються заздалегідь і мають відображатися на одному й тому ж компоненті. Отже, перший спосіб відповідає нашим вимогам.
Щоб динамічно завантажувати компоненти за допомогою 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:
Ми надрукували їхні імена на конструкторі для трьох модалів.
Modal1 і Modal2 завантажуються динамічно, лише при натисканні кнопки для завантаження запускається конструктор виконання, Modal3 не використовує динамічне завантаження, після завантаження батьківського інтерфейсу конструктор інтерфейсу Modal3 запускається негайно.
Таким чином ви побачите переваги динамічного завантаження, і воно не завантажується, якщо ви ним не користуєтеся, подібно до лінивого завантаження в C#.
Завантаження вихідного коду:
Туристи, якщо ви хочете побачити прихований контент цього допису, будь ласка Відповідь
Ресурси:Вхід за гіперпосиланням видно.
|
Опубліковано 29.05.2020 16:40:00
|
|
|
|
Орендодавець|
Опубліковано 24.07.2020 17:52:58
|
Опубліковано 26.10.2022 17:27:19
|
