Le direttive sono classi che aggiungono un comportamento aggiuntivo agli elementi nelle tue applicazioni Angular. Le direttive angolari possono aiutare a gestire molti aspetti del DOM, inclusi moduli, elenchi, stili e molti altri. Angular include diverse direttive integrate e puoi definirne di tue per associare comportamenti personalizzati agli elementi nel DOM. In questo tutorial impareremo come creare e utilizzare una direttiva attributo per far sì che gli elementi DIV si comportino come un pulsante o un collegamento.

Il mondo delle direttive

Fondamentalmente, le direttive sono funzioni che vengono eseguite ogni volta che il compilatore Angular le trova nel DOM. Il loro scopo è estendere la potenza dell’HTML dandogli nuova sintassi e funzionalità. Angular utilizza tre tipi di direttive come segue:

1. Componenti sono in realtà direttive con modelli. Sotto le coperte, usano l’API della direttiva e ci danno un modo più pulito per definirli.

Gli altri due tipi di direttiva non hanno modelli. Invece, sono specificamente adattati alla manipolazione DOM.

2. Direttive sugli attributi manipolare il DOM modificandone il comportamento e l’aspetto. Possiamo utilizzare le direttive degli attributi per applicare lo stile condizionale agli elementi, mostrare o nascondere elementi o modificare dinamicamente il comportamento di un componente in base a una proprietà che cambia. Le direttive di attributo integrate includono NgClass, NgStyle, e NgModel.
3. Direttive strutturali sono specificamente progettati per creare e distruggere elementi DOM. Alcune direttive di attributo, come nascosto, che mostra o nasconde un elemento, non altera il DOM ma governa l’aspetto di un elemento. Le direttive angolari strutturali tendono ad essere molto meno favorevoli al DOM, poiché aggiungono o rimuovono completamente elementi dal DOM. A causa della loro natura potenzialmente distruttiva, devi stare molto attento quando li usi.

Generazione di una nuova direttiva

L’Angular CLI ha un comando per creare una direttiva come segue:

ng g directive buttonize

L’istruzione precedente genererà due file: direttiva.pulsante.ts e il pulsante.direttiva.spec.ts file di prova. Aggiungerà la nostra nuova direttiva a app.module.ts anche:

import { ButtonizeDirective } from './buttonize.directive';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    ButtonizeDirective
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Codificare la direttiva sui bottoni

Come minimo, il file .ts della direttiva conterrà il @Direttiva() decoratore che definisce la proprietà del selettore come apparirà nei file modello, oltre a un costruttore vuoto:

import { Directive } from '@angular/core';

@Directive({
  selector: '[buttonize]'
})

export class ButtonizeDirective {

  constructor() { }

}

Aggiunta della nostra logica personalizzata

La nostra direttiva richiederà due opzioni predefinite: il tabindex e ruolo, che sono impostati su 0 e ‘pulsante’ rispettivamente:

const DEFAULT_OPTIONS = {
    tabindex: 0,
    role: 'button'
};

Questi possono essere superati fornendo opzioni alla nostra direttiva. Per fare ciò, aggiungeremo una proprietà di input denominata come la nostra direttiva. In questo modo, possiamo fornire opzioni assegnando un oggetto direttamente alla nostra direttiva all’interno del modello in questo modo:

[buttonize]="{tabindex: -1}"

Le opzioni verranno impostate tramite il @HostBinding decoratore. Contrassegna una proprietà DOM come proprietà di associazione dell’host e fornisce i metadati di configurazione. Angular controlla automaticamente le associazioni di proprietà dell’host durante il rilevamento delle modifiche e, se un’associazione cambia, aggiorna l’elemento host della direttiva.

Nel ngOnInit evento, useremo lo statico Oggetto.assegna() metodo per impostare le opzioni sulla nostra direttiva. Il Oggetto.assegna() il metodo copia tutto enumerabile proprio proprietà da uno o più oggetti di origine a un oggetto di destinazione e restituisce l’oggetto di destinazione modificato. Ecco il codice per quella parte:

export class ButtonizeDirective implements OnInit {
    @Input('buttonize')
    public options: any = {};

    @HostBinding('tabindex')
    public tabindex: number;

    @HostBinding('attr.role')
    public role: string;

    constructor() { }

    public ngOnInit(): void {
        this.options = Object.assign({}, DEFAULT_OPTIONS, this.options);
        this.tabindex = this.options.tabindex;
        this.role = this.options.role;
    }
    
    //...
}

Puoi vedere l’impostazione predefinita tabindex e ruolo nell’Ispettore elementi del browser:

Gestione della pressione dei tasti in angolare

Ora non resta che acquisire i tasti premuti e convertire i tasti Invio in clic. Per farlo, possiamo usare il decoratore @HostListener e ascoltare in modo specifico il ‘keyup.invio’ evento. Dovremmo anche passare in TastieraEvento in modo che possiamo impedirgli di ribollire fino agli elementi genitori. Infine, invochiamo il clic() metodo sul ElementRef che è stato iniettato tramite il costruttore:

constructor(protected eleRef: ElementRef) { }

@HostListener('keyup.enter', ["$event"])
public onEnterKeyUp(event: KeyboardEvent): void {
    event.stopPropagation();
    //trigger a mouse click event on a specific HTML element
    this.eleRef.nativeElement.click();
}

Sovrascrivere le opzioni predefinite

Anche se abbiamo già accennato alle opzioni predefinite, non abbiamo davvero visto un esempio di override delle opzioni in azione. Ecco uno che imposta il tabindex a -1 e assegna un ruolo di ‘link’:

<span [buttonize]="{tabindex: -1, role: 'link'}" (click)="goToComponent(element)">

Ciò avrebbe l’effetto di rendere l’elemento SPAN irraggiungibile tramite il tasto TAB, il che sarebbe utile se volessimo sostituire un tasto di navigazione diverso. Il ruolo di collegamento viene utilizzato per identificare un elemento che crea un collegamento ipertestuale a una risorsa che potrebbe trovarsi all’interno dell’applicazione o esterna. I lettori dello schermo e altre tecnologie di assistenza si basano su ruolo attributo per identificare lo scopo e l’utilizzo di un elemento.

La dimostrazione

Troverai la demo della lezione di oggi su stackblitz.com. Contiene due usi della direttiva buttonize: trasformare un DIV in un pulsante e un altro in un collegamento. In entrambi i casi, premendo il tasto Invio si attiva il gestore dei clic. Il “link” ha anche un tabindex di -1 in modo che non sia focalizzabile tramite la navigazione da tastiera. Ecco il markup HTML:

<h2>Attribute Directive Demo</h2>

<h4>Presto, the following DIV is now a button!</h4>
<div buttonize class="buttonlink" (click)="onClick()">Click Me!</div>

<br/>

<h4>Presto, the following DIV is now a link!</h4>
<div class="link" [buttonize]="{tabindex: -1, role: 'link'}" (click)="onClick()">Click Me!</div>
<p>(Notice that you cannot TAB to it.)</p>

Richiamato sia da clic che da Invio TastoUP eventi, il al clic() il gestore visualizza semplicemente una casella di avviso:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {

  onClick() {
    alert("Thanks for clicking!");
  }
}

Conclusione

Nell’articolo di oggi, abbiamo visto come le direttive angolari sono funzioni che estendono la potenza dell’HTML dandogli nuova sintassi e funzionalità. Ora che sai come creare una Direttiva sugli attributi, non ho dubbi che troverai molti usi per loro nelle tue applicazioni.