Este artigo irá guiá-lo através do padrão de diretiva estrutural em Angular, apresentar o que é a diretiva estrutural e como usá-la, espero que seja útil para você!
Entrada front-end (vue) para curso de domínio: entre no aprendizado
Em Angular , existem dois tipos de diretivas. As diretivas de atributos modificam a aparência ou o comportamento dos elementos DOM . As diretivas estruturais adicionam ou removem elementos DOM .
As diretivas estruturais são um dos recursos mais poderosos do Angular , mas são frequentemente mal compreendidas.
Se você está interessado em aprender sobre diretivas de estrutura, vamos continuar lendo e descobrir o que são, para que servem e como utilizá-las em seus projetos. [Tutoriais relacionados recomendados: "tutorial angular"]
Neste artigo, você aprenderá sobre o padrão de diretiva estrutural Angular . Você saberá o que são e como usá-los.
Depois de estudar este artigo, você entenderá melhor essas instruções e as utilizará em projetos reais.
Diretivas estruturais Angular são diretivas que podem alterar a estrutura DOM . Estas instruções podem添加、移除或者替换元素. As directivas estruturais têm um símbolo * antes do seu nome.
Em Angular , existem três diretivas estruturadas padrão.
*ngIf - Inclui condicionalmente um modelo baseado no valor booleano retornado pela expressão (ou seja, renderização condicional do modelo)
*ngFor - itera sobre um array
*ngSwitch - Renderiza cada gráfico correspondente
Abaixo está um exemplo de uma diretiva estruturada. A sintaxe é semelhante a esta:
<elemento ng-if="Condição"></element>
As declarações condicionais devem ser true ou false .
<div *ngIf="worker" class="name">{{worker.name}}</div> Angular gera um elemento <ng-template> e então aplica a diretiva *ngIf . Isso o converte em uma associação de propriedade entre colchetes [] , como [ngIf] . O resto do <div> , incluindo o nome da classe, é inserido no <ng-template> . por exemplo:
<ng-template [ngIf]="trabalhador">
<div class="name">{{worker.name}}</div>
</ng-template> Para usar diretivas estruturais, precisamos adicionar um elemento com a diretiva no modelo HTML . Em seguida, adicione, exclua ou substitua elementos com base nas condições ou expressões que definimos na diretiva.
Vamos adicionar um código HTML simples.
O conteúdo do arquivo app.component.html é o seguinte:
<div style="text-align:center"> <h1> Bem-vindo </h1> </div> <h2> <app-illustrations></app-illustrations></h2>
*ngIf Usamos *ngIf para determinar se devemos exibir ou remover um elemento com base nas condições. ngIf é muito semelhante a if-else .
A diretiva *ngIf remove elementos HTML quando a expressão é false . Quando true , uma cópia do elemento será adicionada DOM .
O código *ngIf completo é o seguinte:
<h1> <button (click)="toggleOn =!toggleOn">ilustração ng-if</button> </h1> <div *ngIf="!toggleOn"> <h2>Olá </h2> <p>Bom dia, clique no botão para visualizar</p> </div> <h> <p>Hoje é segunda-feira e este é um elemento de texto fictício para fazer você se sentir melhor</p> <p>Compreendendo a diretiva ngIf com a cláusula else</p>
*ngFor Usamos a diretiva *ngFor para iterar no array. por exemplo:
<ul>
<li *ngFor="deixe o wok dos trabalhadores">{{ wok }}</li>
</ul> Nosso arquivo TypeScript componente:
importar { Componente, OnInit } de '@angular/core';
@Componente({
seletor: 'ilustrações de aplicativos',
templateUrl: './illustrations.component.html',
styleUrls: ['./illustrations.component.css']
})
classe de exportação IllustrationsComponent implementa OnInit {
trabalhadores: qualquer = [
'trabalhador 1',
'trabalhador 2',
'trabalhador 3',
'trabalhador 4',
'trabalhador 5',
]
construtor() { }
ngOnInit(): void {
}
}*ngSwitchTradutor adicionado: Este comando é muito útil no desenvolvimento real
Usamos ngSwitch para decidir qual elemento renderizar com base em diferentes instruções condicionais. A diretiva *ngSwitch é muito semelhante à instrução switch que usamos. por exemplo:
<div [ngSwitch]="Minhas compras"> <p *ngSwitchCase="'cups'">xícaras</p> <p *ngSwitchCase="'veg'">Legumes</p> <p *ngSwitchCase="'clothes'">Calças</p> <p *ngSwitchDefault>Minhas compras</p> </div>
Em typescript :
Minhas compras: string = '';
Temos uma variável MyShopping que possui um valor padrão e é usada para renderizar elementos específicos no módulo que atendem às condições.
Quando o valor da condição for true , os elementos relevantes serão renderizados no DOM e os elementos restantes serão ignorados. Se nenhum elemento corresponder, o elemento *ngSwitchDefault será renderizado no DOM .
Se você deseja adicionar ou remover um elemento do DOM , você deve usar diretivas de estrutura. Claro, também podemos usá-los para alterar estilos CSS de elementos ou adicionar ouvintes de eventos. Você pode até usá-los para criar um novo elemento que não existia antes.
A melhor regra é: quando estamos pensando em manipular o DOM, é hora de usar diretivas estruturais .
As diretivas estruturais são uma parte importante do Angular e podemos usá-las de várias maneiras.
Espero que através deste artigo os leitores possam entender melhor como usar essas instruções e quando usar esses modos.