Angular 4 - Directivas

Directives en Angular es un js clase, que se declara como @directive. Tenemos 3 directivas en Angular. Las directivas se enumeran a continuación:

Directivas de componentes

Estos forman la clase principal que tiene detalles de cómo el componente debe procesarse, instanciarse y usarse en tiempo de ejecución.

Directivas estructurales

Una directiva de estructura se ocupa básicamente de manipular los elementos dom. Las directivas estructurales tienen un signo * antes de la directiva. Por ejemplo,*ngIf y *ngFor.

Directivas de atributos

Las directivas de atributo se ocupan de cambiar el aspecto y el comportamiento del elemento dom. Puede crear sus propias directivas como se muestra a continuación.

¿Cómo crear directivas personalizadas?

En esta sección, analizaremos las directivas personalizadas que se utilizarán en los componentes. Las directivas personalizadas son creadas por nosotros y no son estándar.

Veamos cómo crear la directiva personalizada. Crearemos la directiva usando la línea de comando. El comando para crear la directiva usando la línea de comando es:

ng g directive nameofthedirective

e.g

ng g directive changeText

Así es como aparece en la línea de 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

Los archivos anteriores, es decir, change-text.directive.spec.ts y change-text.directive.ts ser creado y el app.module.ts el archivo está actualizado.

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

los ChangeTextDirectiveLa clase está incluida en las declaraciones del archivo anterior. La clase también se importa del archivo que se muestra a continuación.

cambiar-texto. directiva

import { Directive } from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

El archivo anterior tiene una directiva y también una propiedad de selector. Sea lo que sea que definamos en el selector, lo mismo tiene que coincidir en la vista, donde asignamos la directiva personalizada.

En el app.component.html vista, agreguemos la directiva de la siguiente manera:

<div style="text-align:center">
   <span changeText >Welcome to {{title}}.</span>
</div>

Escribiremos los cambios en change-text.directive.ts archivo de la siguiente manera:

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. ";
   }
}

En el archivo anterior, hay una clase llamada ChangeTextDirective y un constructor, que toma el elemento de tipo ElementRef, que es obligatorio. El elemento tiene todos los detalles a los que elChange Text se aplica la directiva.

Hemos agregado el console.logelemento. El resultado del mismo se puede ver en la consola del navegador. El texto del elemento también se cambia como se muestra arriba.

Ahora, el navegador mostrará lo siguiente.