Come creare direttive personalizzate in Angular

Una delle caratteristiche principali di Angular sono le direttive. Le direttive angolari sono un modo per aggiungere comportamenti agli elementi DOM. Angular fornisce una varietà di direttive integrate e puoi anche creare direttive personalizzate in questo robusto framework.

Cosa sono le direttive?

Le direttive sono codici personalizzati che Angular utilizza per modificare il comportamento o l'aspetto di un elemento HTML. Puoi utilizzare le direttive per aggiungere ascoltatori di eventi, modificare il DOM o mostrare o nascondere elementi.

Ne esistono due tipi direttive integrate in Angular, strutturale e attributo. Le direttive strutturali modificano la struttura del DOM, mentre le direttive sugli attributi modificano l'aspetto o il comportamento di un elemento. Le direttive sono un modo potente per estendere la funzionalità dei componenti Angular.

Vantaggi delle Direttive

Ecco alcuni dei vantaggi derivanti dall'utilizzo delle direttive in Angular:

• Riutilizzabilità: puoi utilizzare le direttive in più componenti, risparmiando tempo e fatica.
• Estensibilità: puoi estendere le direttive per aggiungere nuove funzionalità, rendendo i tuoi componenti più potenti.
• Flessibilità: Utilizzando le direttive, puoi modificare il comportamento o l'aspetto di un elemento in vari modi, offrendoti molta flessibilità durante la creazione delle tue applicazioni.

Configurazione della tua applicazione Angular

Per configurare un'applicazione Angular, installa la CLI Angular eseguendo il seguente codice nel tuo terminale:

npm install -g @angular/cli

Dopo aver installato la CLI Angular, crea un progetto Angular eseguendo il seguente comando:

ng new custom-directives-app

L'esecuzione del comando sopra creerà un progetto Angular denominato app-direttive-personalizzate.

Creazione di una direttiva personalizzata

Ora hai un progetto Angular e puoi iniziare a creare le tue direttive personalizzate. Crea un file TypeScript e definisci una classe decorata con il file @Direttiva decoratore.

IL @Direttiva decorator è un decoratore TypeScript utilizzato per creare direttive personalizzate. Ora crea un highlight.direttiva.ts file nel src/app directory. In questo file creerai la direttiva personalizzata evidenziare.

Per esempio:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

Il blocco di codice sopra importa il file Direttiva decoratore dal @angolare/core modulo. IL @Direttiva il decoratore decora il EvidenziaDirettiva classe. Prende un oggetto come argomento con a selettore proprietà.

In questo caso, imposti il ​​file selettore proprietà a [myHighlight] ciò significa che puoi applicare questa direttiva ai tuoi modelli aggiungendo il file myHighlight attribuire ad un elemento.

Ecco un esempio di come utilizzare la direttiva nei tuoi modelli:

Some text</p>
</main>

Aggiunta di comportamenti alla direttiva

Ora hai creato con successo una direttiva. Il passo successivo è aggiungere un comportamento alla direttiva in modo che possa manipolare il DOM. Avrai bisogno di ElementoRif da @angular/core per aggiungere un comportamento a una direttiva.

Inietterai ElementRef nel costruttore della direttiva. ElementRef è un wrapper attorno a un elemento nativo all'interno di una vista.

Ecco un esempio di come aggiungere un comportamento a una direttiva:

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

In questo esempio, il costruttore di EvidenziaDirettiva La classe accetta un parametro ElementRef, che Angular inserisce automaticamente. ElementRef fornisce l'accesso all'elemento DOM sottostante.

Utilizzando this.element.nativeElement property, accedi all'elemento DOM nativo del file elemento parametro. Quindi imposti il ​​colore di sfondo del componente su azzurro usando il stile proprietà. Ciò significa che qualunque elemento applichi myHighlight direttiva avrà uno sfondo azzurro.

Per rendere funzionale la direttiva, assicurati di importarla e dichiararla nel file app.modulo.ts file.

Per esempio:

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

Ora puoi applicare la direttiva myHighlight agli elementi nei tuoi componenti Angular.

Some text</p>
</main>

Esegui la tua applicazione sul server di sviluppo per verificare se la direttiva funziona. Puoi farlo eseguendo il seguente comando nel tuo terminale:

ng serve

Dopo aver eseguito il comando, vai a http://localhost: 4200/ sul tuo browser web e vedrai un'interfaccia simile all'immagine qui sotto.

Le direttive integrate Angular accettano valori per modificare l'aspetto dell'elemento, ma la direttiva personalizzata myHighlight non. Puoi configurare la direttiva per accettare un valore che utilizzerà per impostare dinamicamente il colore di sfondo del modello.

Per fare ciò, sostituire il codice nel file highlight.direttiva.ts file con questo:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

Nel blocco di codice sopra, il file EvidenziaDirettiva La classe contiene un metodo setter chiamato myHighlight. Questo metodo richiede a colore parametro del tipo stringa. Decori il metodo setter con il @Ingresso decoratore, permettendoti di passare il valore del colore nella direttiva dal componente genitore.

Ora puoi determinare il colore dello sfondo passando un valore alla direttiva myHighlight.

Per esempio:

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

Creazione di una direttiva strutturale personalizzata

Nelle sezioni precedenti hai imparato come creare, aggiungere comportamenti e applicare direttive sugli attributi personalizzati al tuo modello. Le direttive sugli attributi modificano l'aspetto degli elementi DOM, mentre le direttive strutturali aggiungono, rimuovono o spostano elementi nel DOM.

Angular fornisce due direttive strutturali, ngFor E ngIf. La direttiva ngFor esegue il rendering di un modello per ogni elemento in una raccolta (array), mentre il file ngIf gestisce il rendering condizionale.

In questa sezione creerai una direttiva strutturale personalizzata che funziona come ngIf direttiva. Per fare ciò, crea un file condizione.direttiva.ts file.

Nel condizione.direttiva.ts file, scrivi questo codice:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

Questo blocco di codice consente di eseguire il rendering condizionale degli elementi applicando il file condizione direttiva a un elemento e passando un valore booleano dal componente genitore.

Nel costruttore di Direttiva sulle condizioni class, inserisci un'istanza di ModelloRif E VisualizzaContenitoreRif. TemplateRef rappresenta il modello associato alla direttiva e ViewContainerRef rappresenta il contenitore in cui l'applicazione esegue il rendering delle visualizzazioni.

Il metodo setter della classe ConditionDirective utilizza un'istruzione if else per controllare il parametro arg. La direttiva crea una vista incorporata utilizzando il modello fornito se il parametro è true. IL createEmbeddedView Il metodo della classe ViewContainerRef crea ed esegue il rendering della vista nel DOM.

Se il parametro è falso, la direttiva cancella il contenitore della vista utilizzando il file chiaro metodo della classe ViewContainerRef. Ciò rimuove qualsiasi vista precedentemente renderizzata dal DOM.

Dopo aver creato la direttiva, registrala nel tuo progetto importandola e dichiarandola nel file app.modulo.ts file. Dopo aver fatto ciò, puoi iniziare a utilizzare la direttiva nei tuoi modelli.

Ecco un esempio di come utilizzarlo nei tuoi modelli:

"true">Hello There!!!</p>
</main>

Ora puoi creare direttive personalizzate

Le direttive personalizzate in Angular forniscono un modo potente per manipolare il DOM e aggiungere comportamenti dinamici ai tuoi modelli. Hai imparato come creare e applicare attributi personalizzati e direttive strutturali nelle tue applicazioni Angular. Comprendendo come creare e utilizzare direttive personalizzate, puoi sfruttare appieno le funzionalità di Angular.