Шаблон компонента не всегда будет фиксирован. Вашему приложению, возможно, потребуется загрузить новые компоненты во время выполнения.
Сценарии использования:
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:
Мы напечатали их имена на конструкторе для трёх модалей.
Modal1 и Modal2 оба загружаются динамически, только при нажатии кнопки для загрузки запускается конструктор выполнения, Modal3 не использует динамическую загрузку, после загрузки родительского интерфейса конструктор интерфейса Modal3 запускается немедленно.
Таким образом, можно увидеть преимущества динамической загрузки, и она не будет загружаться, если вы её не используете, аналогично ленивой загрузке в C#.
Скачать исходный код:
Туристы, если вы хотите увидеть скрытое содержание этого поста, пожалуйста Ответ
Ресурсы:Вход по гиперссылке виден.
|
Опубликовано 29.05.2020 16:40:00
|
|
|
|
Хозяин|
Опубликовано 24.07.2020 17:52:58
|
Опубликовано 26.10.2022 17:27:19
|
