development:angular:directivas

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió		 Revisió prèvia
development:angular:directivas [22/01/2020 11:55] – matedevelopment:angular:directivas [09/02/2020 14:46] (actual) – mate
Línia 1: Línia 1:
-= directivas += angular: directivas y personalización 
-== 3.7 directivas estructurales +  * componentes 
-  * no es necesario fichero HTML +    * directivas con plantilla asociada 
-  * no es un componente +    * son del tipo más común 
-  * se reconocen por tener **%%*%%** en el nombre+  * [[development:angular:directivas-atributos|directivas de atributos]] 
 +    * cambian la apariencia o el comportamiento de un elemento, componente u otra directiva 
 +    * se usan como atributos de los elementos HTML (ngStyle) 
 +  * [[development:angular:directivas-estructurales|directivas estructurales]] 
 +    * modifican la representación del DOM añadiendo o eliminando elementos 
 +    * cambian la estructura de la vista (ngFor, ngIf)
  
-== 3.8 directivas estructurales +== directivas personalizadas 
-  * directivas +  * para extender las capacidades del framework 
-  * {{ :development:angular:pasted:20200122-100054.png }} +  * creamos nuestros propias directivas de atributo o directivas estructurales
-  * binding de eventos +
-  * {{ :development:angular:pasted:20200122-100139.png }}+
  
-== 4.1 directiva bgStyle +=== directiva de atributo personalizada 
-== 4.2 ámbito del css +  * queremos crear algo así:<sxh html><div appDestacado>Oferta de la semana</div></sxh> 
-== 4.3 ngClass+  * usando el cli generamos el código genérico:<code bash>ng g[enerate] d[irective] directivas/destacado --spec=false</code> 
 +  * obtendremos algo así y le añadiremos las líneas marcadas:<sxh typescript; highlight:[7-12]>import { Directive } from '@angular/core'; 
 +@Directive({ 
 +    selector: '[appDestacado]' 
 +})
  
 +export class DestacadoDirective {
 +    constructor( private el: ElementRef) { 
 +         const nativeElement = el.nativeElement;
 +         nativeElement.style.fontSize = '28px';
 +         nativeElement.style.color = 'red';
 +         nativeElement.style.textAlign = 'center';
 +         nativeElement.style.border = '2px solid red';
 +    }
 +}</sxh>
 +    * **ElementRef** nos da acceso al elemento al cual se ha de aplicar la directiva (angular lo inyecta mediante el mecanismo de [[https://es.wikipedia.org/wiki/Inyecci%C3%B3n_de_dependencias|inyección de dependencias]])
 +  * aceptando parámetros desde el componente .html<sxh typescript; highlight:7,14>
 +import {Directive, ElementRef, Input, OnInit} from '@angular/core';
 +@Directive({
 +    selector: '[appDestacado]'
 +})
 +
 +export class DestacadoDirective implements OnInit {
 +    @Input('appDestacado') userColor: string;
 +    constructor(private el: ElementRef) { }
 +    ngOnInit(): void {
 +        const nativeElement = this.el.nativeElement;
 +        nativeElement.style.fontSize = '28px';
 +        nativeElement.style.color = this.userColor || 'red';
 +        nativeElement.style.textAlign = 'center';
 +        nativeElement.style.border = '2px solid ' + (this.userColor || 'red');
 +    }
 +}
 +</sxh>
 +    * usamos el decorador **@Input** para recibir el parámetro que recibimos desde el html:<sxh html; highlight:7>
 +<div class="container main.container">
 +    <h1>Demo <small>directivas</small></h1>
 +    <hr>
 +    <app-clases></app-clases>
 +    <br><br>
 +    <div appDestacado>Oferta de la semana</div>
 +    <div [appDestacado]="'violet'">Oferta de la semana</div>
 +</div>
 +</sxh>
 +
 +=== directiva estructural personalizada
 +<code bash>ng g[enerate] d[irective] directivas/nult --skipTests</code>
 +  * en contraposición a las directivas de atributo, tenemos que acceder a través del constructor a la plantilla a la que la directive puede acceder, es decir, a la pantilla que posiblemente necesitemos modificar
 +  * la directiva ha de tener un parámetro de entrada (a través de **@Input**)
 +  * ejemplo:<sxh html; highlight:6-8>
 +<div class="container main.container">
 +    <h1>Demo <small>directivas</small></h1>
 +    <hr>
 +    <app-clases></app-clases>
 +    <br><br>
 +    <p *appMult="5">
 +        Saludos
 +    </p>
 +</div>
 +</sxh>
 +<sxh typescript>
 +import { Directive } from '@angular/core';
 +
 +@Directive({
 +    selector: '[appMult]'
 +})
 +
 +export class MultDirective {
 +
 +    constructor(
 +        private templateRef: TemplateRef<any>,
 +        private viewContainer: ViewContainerRef) { 
 +
 +            @Input() set appMult(numero: number) {
 +                for (let i = 0; i < numero; i++) {
 +                    this.viewContainer.createEmbeddedView(this.templateRef);
 +                }
 +            }        
 +        }
 +    }
 +</sxh>
  • development/angular/directivas.1579722910.txt.gz
  • Darrera modificació: 22/01/2020 11:55
  • per mate