Angular7 - Direttive

Directives in Angular è una classe js, dichiarata come @directive. Abbiamo 3 direttive in Angular. Le direttive sono elencate di seguito:

Direttive sui componenti

Questi formano la classe principale con i dettagli su come il componente dovrebbe essere elaborato, istanziato e utilizzato in fase di esecuzione.

Direttive strutturali

Una direttiva di struttura si occupa fondamentalmente di manipolare gli elementi dom. Le direttive strutturali hanno un segno * prima della direttiva. Per esempio,*ngIf e *ngFor.

Direttive sugli attributi

Le direttive sugli attributi riguardano la modifica dell'aspetto e del comportamento dell'elemento dom. È possibile creare le proprie direttive come spiegato nella sezione seguente.

Come creare direttive personalizzate?

In questa sezione, discuteremo delle direttive personalizzate da utilizzare nei componenti. Le direttive personalizzate vengono create da noi e non sono standard.

Vediamo come creare la direttiva personalizzata. Creeremo la direttiva utilizzando la riga di comando. Il comando per creare la direttiva utilizzando la riga di comando è il seguente:

ng g directive nameofthedirective 
e.g 
ng g directive changeText

Appare nella riga di comando come indicato nel codice seguente:

C:\projectA7\angular7-app>ng g directive changeText 
CREATE src/app/change-text.directive.spec.ts (241 bytes) 
CREATE src/app/change-text.directive.ts (149 bytes) 
UPDATE src/app/app.module.ts (565 bytes)

I file sopra, cioè, change-text.directive.spec.ts e change-text.directive.ts vengono creati e il file app.module.ts viene aggiornato.

app.module.ts

import { BrowserModule } from'@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from'./new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive';

@NgModule({ 
   declarations: [ 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Il ChangeTextDirectiveclass è inclusa nelle dichiarazioni nel file sopra. La classe viene importata anche dal file fornito di seguito:

change-text.directive

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

@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

Il file sopra ha una direttiva e ha anche una proprietà selector. Qualunque cosa definiamo nel selettore, la stessa deve corrispondere nella vista, dove assegniamo la direttiva personalizzata.

Nella vista app.component.html, aggiungiamo la direttiva come segue:

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>
<div style = "text-align:center"> 
   <span changeText >Welcome to {{title}}.</span> 
</div>

Scriveremo le modifiche in change-text.directive.ts file come segue -

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed by changeText Directive.";
   }
}

Nel file sopra, c'è una classe chiamata ChangeTextDirective e un costruttore, che accetta l'elemento di tipo ElementRef, che è obbligatorio. L'elemento ha tutti i dettagli a cui ilChange Text viene applicata la direttiva.

Abbiamo aggiunto l'elemento console.log. L'output dello stesso può essere visualizzato nella console del browser. Anche il testo dell'elemento viene modificato come mostrato sopra.

Ora, il browser mostrerà quanto segue:

I dettagli dell'elemento su cui viene fornito il selettore di direttiva nella console. Da quando abbiamo aggiunto il filechangeText direttiva a un tag span, vengono visualizzati i dettagli dell'elemento span.