Cómo construir directivas personalizadas en Angular

Cómo construir directivas personalizadas en Angular
Lectores como usted ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Una de las características clave de Angular son las directivas. Las directivas angulares son una forma de agregar comportamiento a los elementos DOM. Angular proporciona una variedad de directivas integradas y también puede crear directivas personalizadas en este sólido marco.





MUO Vídeo del día DESPLÁCETE PARA CONTINUAR CON EL CONTENIDO

¿Qué son las directivas?

Las directivas son códigos personalizados que Angular utiliza para modificar el comportamiento o la apariencia de un elemento HTML. Puede utilizar directivas para agregar detectores de eventos, cambiar el DOM o mostrar u ocultar elementos.



Hay dos tipos de directivas integradas en Angular , estructural y atributo. Las directivas estructurales cambian la estructura del DOM, mientras que las directivas de atributos cambian la apariencia o el comportamiento de un elemento. Las directivas son una forma poderosa de ampliar la funcionalidad de los componentes de Angular.





Beneficios de las directivas

Estos son algunos de los beneficios de usar directivas en Angular:

  • Reutilizabilidad : Puede utilizar directivas en varios componentes, lo que le permitirá ahorrar tiempo y esfuerzo.
  • Extensibilidad : Puede ampliar las directivas para agregar nuevas funciones, haciendo que sus componentes sean más potentes.
  • Flexibilidad : Al utilizar directivas, puede modificar el comportamiento o la apariencia de un elemento de varias maneras, lo que le brinda mucha flexibilidad al crear sus aplicaciones.

Configurando su aplicación angular

Para configurar una aplicación Angular, instale Angular CLI ejecutando el siguiente código en su terminal:



 npm install -g @angular/cli

Después de instalar Angular CLI, cree un proyecto Angular ejecutando el siguiente comando:

 ng new custom-directives-app

Ejecutar el comando anterior creará un proyecto Angular llamado aplicación-directivas-personalizadas .



Crear una directiva personalizada

Ahora tiene un proyecto Angular y puede comenzar a crear sus directivas personalizadas. Cree un archivo TypeScript y defina una clase decorada con el @Directiva decorador.

El @Directiva decorador es un decorador de TypeScript que se utiliza para crear directivas personalizadas. Ahora crea un resaltar.directiva.ts archivo en el origen/aplicación directorio. En este archivo, creará la directiva personalizada. destacar .



Por ejemplo:

recuperar el título del video de youtube eliminado 
 import { Directive } from "@angular/core"; 
 
@Directive({ 
  selector: "[myHighlight]", 
}) 
export class HighlightDirective { 
  constructor() {} 
}

El bloque de código de arriba importa el Directiva decorador de la @angular/núcleo módulo. El @Directiva decorador decora el ResaltarDirectiva clase. Toma un objeto como argumento con un selector propiedad.

En este caso, usted establece el selector propiedad a [miDestacado] lo que significa que puede aplicar esta directiva a sus plantillas agregando el miDestacado atributo a un elemento.

A continuación se muestra un ejemplo de cómo utilizar la directiva en sus plantillas:

 <main> 
 <p myHighlight>Some text</p> 
</main>

Agregar comportamiento a la directiva

Ahora ha creado con éxito una directiva. El siguiente paso es agregar un comportamiento a la directiva para que pueda manipular el DOM. Necesitarás el ElementoRef desde @angular/core para agregar un comportamiento a una directiva.

Inyectarás ElementRef en el constructor de la directiva. ElementRef es un contenedor alrededor de un elemento nativo dentro de una vista.

A continuación se muestra un ejemplo de cómo se agrega un comportamiento a una directiva:

 import { Directive, ElementRef } from "@angular/core"; 
 
@Directive({ 
    selector: "[myHighlight]" 
}) 
export class HighlightDirective { 
    constructor(private element: ElementRef) { 
        this.element.nativeElement.style.backgroundColor = 'lightblue'; 
    } 
}

En este ejemplo, el constructor del ResaltarDirectiva La clase toma un parámetro ElementRef, que Angular inyecta automáticamente. ElementRef proporciona acceso al elemento DOM subyacente.

Usando este.elemento.nativeElement propiedad, accede al elemento DOM nativo del elemento parámetro. Luego establece el color de fondo del componente en azul claro utilizando el estilo propiedad. Esto significa que cualquier elemento que apliques miDestacado directiva tendrá un fondo azul claro.

Para que la directiva sea funcional, asegúrese de importarla y declararla en el aplicación.module.ts archivo.

Por ejemplo:

 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 { }

Ahora puedes aplicar la directiva myHighlight a los elementos. en tus componentes angulares .

 <main> 
 <p myHighlight>Some text</p> 
</main>

Ejecute su aplicación en el servidor de desarrollo para probar si la directiva funciona. Puedes hacer esto ejecutando el siguiente comando en tu terminal:

 ng serve

Después de ejecutar el comando, navegue hasta http://localhost:4200/ en su navegador web y verá una interfaz similar a la imagen a continuación.

captura de pantalla de la aplicación de directivas personalizadas

Las directivas incorporadas de Angular aceptan valores para cambiar la apariencia del elemento, pero la directiva personalizada miDestacado no es. Puede configurar la directiva para aceptar un valor que utilizará para establecer dinámicamente el color de fondo de la plantilla.

Para hacer esto, reemplace el código en el resaltar.directiva.ts archivo con esto:

 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) {  
    } 
}

En el bloque de código anterior, el ResaltarDirectiva La clase contiene un método de establecimiento llamado miDestacado . Este método requiere un color parámetro del tipo cadena. Decoras el método setter con el @Aporte decorador, que le permite pasar el valor del color a la directiva desde el componente principal.

Ahora puedes determinar el color de fondo pasando un valor a la directiva myHighlight.

Por ejemplo:

 <main> 
 <p myHighlight='pink'>Some text</p> 
</main>

Creación de una directiva estructural personalizada

En las secciones anteriores, aprendió cómo crear, agregar comportamientos y aplicar directivas de atributos personalizados a su plantilla. Las directivas de atributos cambian la apariencia de los elementos DOM, mientras que las directivas estructurales agregan, eliminan o mueven elementos en DOM.

Angular proporciona dos directivas estructurales, ngPara y GIF . La directiva ngFor representa una plantilla para cada elemento de una colección (matriz), mientras que el GIF maneja la representación condicional.

En esta sección, creará una directiva estructural personalizada que funciona como la GIF directiva. Para ello, cree un condición.directiva.ts archivo.

En el condición.directiva.ts archivo, escriba 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 bloque de código le permite renderizar elementos condicionalmente aplicando el condición directiva a un elemento y pasando un valor booleano del componente principal.

En el constructor del CondiciónDirectiva clase, inyectas una instancia de Referencia de plantilla y VerRefContenedor . TemplateRef representa la plantilla asociada con la directiva y ViewContainerRef representa el contenedor donde la aplicación representa las vistas.

El método de establecimiento de clases ConditionDirective utiliza una declaración if else para verificar el parámetro arg. La directiva crea una vista incrustada utilizando la plantilla proporcionada si el parámetro es verdadero. El crearVistaIncrustada El método de la clase ViewContainerRef crea y representa la vista en el DOM.

Si el parámetro es FALSO , la directiva borra el contenedor de vista usando el claro método de la clase ViewContainerRef. Esto elimina cualquier vista renderizada previamente del DOM.

cómo duplicar una lista de reproducción de Spotify

Después de crear la directiva, regístrela en su proyecto importándola y declarándola en el aplicación.module.ts archivo. Después de hacer esto, puede comenzar a usar la directiva en sus plantillas.

Aquí hay un ejemplo de cómo usarlo en sus plantillas:

 <main> 
 <p *condition="true">Hello There!!!</p> 
</main>

Ahora puedes crear directivas personalizadas

Las directivas personalizadas en Angular proporcionan una forma poderosa de manipular el DOM y agregar comportamiento dinámico a sus plantillas. Ha aprendido a crear y aplicar atributos personalizados y directivas estructurales en sus aplicaciones Angular. Al comprender cómo crear y utilizar directivas personalizadas, podrá aprovechar al máximo las capacidades de Angular.