Angular 4 - Direttive

Directives in Angular è un js class, che è 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 deve 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 mostrato di seguito.

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 è:

ng g directive nameofthedirective

e.g

ng g directive changeText

Ecco come appare nella riga di comando

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

I file di cui sopra, ovvero change-text.directive.spec.ts e change-text.directive.ts vengono creati e il file app.module.ts il file viene aggiornato.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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
   ],

   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

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

cambio di testo. direttiva

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.

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

<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 il file console.logelemento. 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.