La plantilla de un componente no siempre será fija. Tu app puede que necesite cargar algunos componentes nuevos durante la ejecución.
Escenarios de uso:
1. La carga de páginas carga diferentes componentes según distintos parámetros, mostrando distintos efectos
2. La página está compuesta por múltiples elementos, no todos necesitan mostrarse al principio, y la información específica se mostrará después de que el usuario haga clic, como: pestañas, cuadros modales emergentes dinámicos, etc.
El escenario de uso de este artículo es dos, imagina,Si no usas carga dinámica, al abrir la interfaz principal, todos los componentes ocultos de la página se cargarán y todos los componentes llamarán a sus servicios de interfaz correspondientes; a menudo, no necesitamos ver toda la información, lo que es un gran desperdicio de recursos y también puede hacer que la interfaz principal cargue lentamente, afectando la experiencia del usuario。
Hay dos formas de cargar dinámicamente componentes en ng:
Cargar componentes ya declarados: Utiliza ComponentFactoryResolver para renderizar una instancia de un componente en otra vista de componente;
Crear y cargar componentes dinámicamente: Utiliza ComponentFactory y Compiler para crear y renderizar componentes
Según nuestras necesidades, los componentes individuales se desarrollan de antemano y deben mostrarse en el mismo componente. Así que la primera forma cumple con nuestros requisitos.
Para cargar dinámicamente componentes usando ComponentFactoryResolver, necesitas entender los siguientes conceptos:
- ViewChild: Decorador de propiedades, a través del cual puedes obtener los elementos correspondientes en la vista;
- ViewContainerRef: Un contenedor de vista en el que se pueden crear y eliminar componentes;
- ComponentFactoryResolver: Un analizador de componentes que puede renderizar un componente en una vista de otro.
Primero, veamos los renderizados: haz clic en el botón modal1 para cargar dinámicamente el componente modal1 y haz clic en el botón modal2 para cargar dinámicamente el componente modal2.
Primero, creamos un proyecto angular.
Crear 4 componentes, a saber, index, modal1, modal2 y modal3, de los cuales modal1 y modal2 son nuestros componentes cargados dinámicamente.
Componente índice
HTML:
TS:
Componente modal1
HTML:
TS:
Componente modal2
HTML:
TS:
Componente modal3
HTML:
TS:
Imprimimos sus nombres en el constructor para 3 modales.
Modal1 y Modal2 se cargan dinámicamente; solo cuando se pulsa el botón para cargar, se activa el constructor de ejecución, Modal3 no utiliza carga dinámica; tras cargar la interfaz principal, el constructor de interfaz Modal3 se ejecutará inmediatamente.
De este modo, puedes ver las ventajas de la carga dinámica, y no cargará si no la usas, similar a la carga perezosa en C#.
Descarga del código fuente:
Turistas, si queréis ver el contenido oculto de esta publicación, por favor Respuesta
Recursos:El inicio de sesión del hipervínculo es visible.
|
Publicado en 29/5/2020 16:40:00
|
|
|
|
Propietario|
Publicado en 24/7/2020 17:52:58
|
Publicado en 26/10/2022 17:27:19
|
