Angular 6 - 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:\projectA6\Angular6App>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 (486 bytes)
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 se incluye 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: '[appChangeText]'
})
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 appChangeText >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: '[appChangeText]'
})
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.