O modelo de um componente nem sempre será fixo. Seu app pode precisar carregar alguns componentes novos durante a execução.
Cenários de Uso:
1. Carregamento de página carrega diferentes componentes de acordo com diferentes parâmetros, mostrando efeitos distintos
2. A página é composta por múltiplos elementos, nem todos precisam ser exibidos no início, e informações específicas serão exibidas após o clique do usuário, como: abas de abas (abs), caixas modais dinâmicas pop-up, etc.
O cenário de uso deste artigo é 2, imagine só,Se você não usar carregamento dinâmico, ao abrir a interface principal, todos os componentes ocultos da página serão carregados, e todos os componentes chamam seus serviços de interface correspondentes; muitas vezes, não precisamos ver todas as informações, o que é um grande desperdício de recursos e pode também fazer a interface principal carregar lentamente, afetando a experiência do usuário。
Existem duas maneiras de carregar dinamicamente componentes em ng:
Carregar componentes já declarados: Use o ComponentFactoryResolver para renderizar uma instância de um componente em outra visualização de componente;
Criar e carregar componentes dinamicamente: Use o ComponentFactory e o Compiler para criar e renderizar componentes
De acordo com nossas necessidades, os componentes individuais são desenvolvidos antecipadamente e precisam ser exibidos no mesmo componente. Então, a primeira forma atende aos nossos requisitos.
Para carregar componentes dinamicamente usando o ComponentFactoryResolver, você precisa entender os seguintes conceitos:
- ViewChild: Decorador de imóveis, através do qual você pode obter os elementos correspondentes na vista;
- ViewContainerRef: Um contêiner de visualização onde componentes podem ser criados e excluídos;
- ComponentFactoryResolver: Um parser de componentes que pode renderizar um componente em uma visualização de outro.
Primeiro, vamos olhar as renderizações, clique no botão modal1 para carregar dinamicamente o componente modal1 e clique no botão modal2 para carregar dinamicamente o componente modal2.
Primeiro, criamos um projeto angular.
Crie 4 componentes, a saber: index, modal1, modal2 e modal3, dos quais modal1 e modal2 são nossos componentes dinamicamente carregados.
Componente índice
HTML:
TS:
Componente Modal1
HTML:
TS:
Componente modal2
HTML:
TS:
Componente modal3
HTML:
TS:
Imprimimos os nomes deles no construtor para 3 modais.
Modal1 e Modal2 são ambos carregados dinamicamente, somente quando o botão é clicado para carregar, o construtor de execução será acionado, o modal3 não usa carregamento dinâmico, e após o carregamento da interface pai, o construtor da interface modal3 será executado imediatamente.
Dessa forma, você pode ver as vantagens do carregamento dinâmico, e ele não vai carregar se você não usá-lo, semelhante ao carregamento preguiçoso em C#.
Código fonte para download:
Turistas, se quiserem ver o conteúdo oculto deste post, por favor Resposta
Recursos:O login do hiperlink está visível.
|
Publicado em 29/05/2020 16:40:00
|
|
|
|
Senhorio|
Publicado em 24/07/2020 17:52:58
|
Publicado em 26/10/2022 17:27:19
|
