Home-theater-designers
Um dos principais recursos do Angular são as diretivas. As diretivas angulares são uma forma de adicionar comportamento aos elementos DOM. Angular fornece uma variedade de diretivas integradas e você também pode criar diretivas personalizadas nesta estrutura robusta.
MUO Vídeo do dia ROLE PARA CONTINUAR COM O CONTEÚDO
O que são diretivas?
Diretivas são códigos personalizados que o Angular usa para modificar o comportamento ou a aparência de um elemento HTML. Você pode usar diretivas para adicionar ouvintes de eventos, alterar o DOM ou mostrar ou ocultar elementos.
Existem dois tipos de diretivas integradas em Angular , estrutural e atributo. As diretivas estruturais alteram a estrutura do DOM, enquanto as diretivas de atributos alteram a aparência ou o comportamento de um elemento. As diretivas são uma forma poderosa de estender a funcionalidade dos componentes Angular.
Benefícios das Diretivas
Aqui estão alguns dos benefícios de usar diretivas em Angular:
como encontrar o endereço IP de um e-mail
- Reutilização : você pode usar diretivas em vários componentes, economizando tempo e esforço.
- Extensibilidade : você pode estender diretivas para adicionar novas funcionalidades, tornando seus componentes mais poderosos.
- Flexibilidade : usando diretivas, você pode modificar o comportamento ou a aparência de um elemento de várias maneiras, proporcionando muita flexibilidade ao criar seus aplicativos.
Configurando seu aplicativo Angular
Para configurar um aplicativo Angular, instale o Angular CLI executando o seguinte código em seu terminal:
npm install -g @angular/cli
Após instalar o Angular CLI, crie um projeto Angular executando o seguinte comando:
ng new custom-directives-app
Executar o comando acima criará um projeto Angular chamado aplicativo de diretivas personalizadas .
Criando uma diretiva personalizada
Agora você tem um projeto Angular e pode começar a criar suas diretivas personalizadas. Crie um arquivo TypeScript e defina uma classe decorada com o @Diretiva decorador.
O @Diretiva decorator é um decorador TypeScript usado para criar diretivas personalizadas. Agora crie um destaque.diretiva.ts arquivo no fonte/aplicativo diretório. Neste arquivo, você criará a diretiva personalizada destaque .
Por exemplo:
import { Directive } from "@angular/core";
@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
O bloco de código acima importa o Diretiva decorador do @angular/núcleo módulo. O @Diretiva decorador decora o Diretriz Destaque aula. Toma um objeto como argumento com um seletor propriedade.
Neste caso, você define o seletor propriedade para [meu destaque] o que significa que você pode aplicar esta diretiva aos seus modelos adicionando o meu destaque atributo a um elemento.
Aqui está um exemplo de como usar a diretiva em seus modelos:
<main>
<p myHighlight>Some text</p>
</main>
Adicionando Comportamento à Diretiva
Agora você criou uma diretiva com sucesso. O próximo passo é adicionar um comportamento à diretiva para que ela possa manipular o DOM. Você precisará do ElementoRef de @angular/core para adicionar um comportamento a uma diretiva.
Você injetará ElementRef no construtor da diretiva. ElementRef é um wrapper em torno de um elemento nativo dentro de uma visualização.
Aqui está um exemplo de como você adiciona um comportamento a uma diretiva:
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
}
}
Neste exemplo, o construtor do Diretriz Destaque class recebe um parâmetro ElementRef, que o Angular injeta automaticamente. O ElementRef fornece acesso ao elemento DOM subjacente.
Usando this.element.nativeElement propriedade, você acessa o elemento DOM nativo do elemento parâmetro. Em seguida, você define a cor de fundo do componente como azul claro usando o estilo propriedade. Isso significa que qualquer elemento que você aplique o meu destaque diretiva terá um fundo azul claro.
Para tornar a diretiva funcional, certifique-se de importá-la e declará-la no app.module.ts arquivo.
Por exemplo:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
@NgModule({
declarations: [
AppComponent,
HighlightDirective,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Agora você pode aplicar a diretiva myHighlight aos elementos em seus componentes Angular .
<main>
<p myHighlight>Some text</p>
</main>
Execute seu aplicativo no servidor de desenvolvimento para testar se a diretiva está funcional. Você pode fazer isso executando o seguinte comando em seu terminal:
ng serve
Depois de executar o comando, navegue até http://localhost:4200/ em seu navegador da web e você verá uma interface semelhante à imagem abaixo.
As diretivas angulares integradas aceitam valores para alterar a aparência do elemento, mas a diretiva personalizada meu destaque não. Você pode configurar a diretiva para aceitar um valor que será usado para definir dinamicamente a cor de fundo do modelo.
Para fazer isso, substitua o código no destaque.diretiva.ts arquivo com isto:
import { Directive, ElementRef, Input } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
@Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
}
constructor(private element: ElementRef) {
}
}
No bloco de código acima, o Diretriz Destaque classe contém um método setter chamado meu destaque . Este método leva um cor parâmetro do tipo string. Você decora o método setter com o @Entrada decorador, permitindo que você passe o valor da cor para a diretiva do componente pai.
como usar pip install no windows
Agora você pode determinar a cor de fundo passando um valor para a diretiva myHighlight.
Por exemplo:
<main>
<p myHighlight='pink'>Some text</p>
</main>
Criando uma diretiva estrutural personalizada
Nas seções anteriores, você aprendeu como criar, adicionar comportamentos e aplicar diretivas de atributos customizados ao seu modelo. As diretivas de atributos alteram a aparência dos elementos DOM, enquanto as diretivas estruturais adicionam, removem ou movem elementos no DOM.
inserir caixa de texto no google docs
Angular fornece duas diretivas estruturais, ngFor e GIFs . A diretiva ngFor renderiza um modelo para cada item em uma coleção (array), enquanto o GIFs lida com renderização condicional.
Nesta seção, você criará uma diretiva estrutural personalizada que funciona como o GIFs diretiva. Para fazer isso, crie um condição.diretiva.ts arquivo.
No condição.diretiva.ts arquivo, escreva este código:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
@Directive({
selector: "[condition]"
})
export class ConditionDirective {
@Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
} else {
this.viewContainer.clear();
}
}
constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}
Este bloco de código permite renderizar elementos condicionalmente aplicando o doença diretiva para um elemento e passando um valor booleano do componente pai.
No construtor do CondiçãoDiretiva classe, você injeta uma instância de Referência do modelo e ViewContainerRef . O TemplateRef representa o modelo associado à diretiva e o ViewContainerRef representa o contêiner onde o aplicativo renderiza as visualizações.
O método setter de classe ConditionDirective usa uma instrução if else para verificar o parâmetro arg. A diretiva cria uma visualização incorporada usando o modelo fornecido se o parâmetro for verdadeiro. O criarEmbeddedView O método da classe ViewContainerRef cria e renderiza a visualização no DOM.
Se o parâmetro for falso , a diretiva limpa o contêiner de visualização usando o claro método da classe ViewContainerRef. Isso remove quaisquer visualizações renderizadas anteriormente do DOM.
Após criar a diretiva, registre-a em seu projeto importando-a e declarando-a no app.module.ts arquivo. Depois de fazer isso, você pode começar a usar a diretiva em seus modelos.
Aqui está um exemplo de como usá-lo em seus modelos:
<main>
<p *condition="true">Hello There!!!</p>
</main>
Agora você pode criar diretivas personalizadas
As diretivas personalizadas no Angular fornecem uma maneira poderosa de manipular o DOM e adicionar comportamento dinâmico aos seus modelos. Você aprendeu como criar e aplicar atributos personalizados e diretivas estruturais em seus aplicativos Angular. Ao compreender como criar e usar diretivas personalizadas, você poderá aproveitar ao máximo os recursos do Angular.