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ó

--- development:angular:directivas [27/01/2020 07:27] – mate
+++ development:angular:directivas [09/02/2020 14:46] (actual) – mate
@@ Línia 1: / Línia 1: @@
-= angular: directivas estructurales
+= angular: directivas y personalización
-  * PPT 3.7 + 3.8 + 3.9 + 4.1 + 4.2 + 4.3
+  * componentes
-  * lógica en capa de presentación (plantilla)
+    * directivas con plantilla asociada
-  * se reconocen por tener **%%*%%** en el nombre
+    * son del tipo más común
-  * no es necesario fichero HTML
+  * [[development:angular:directivas-atributos|directivas de atributos]]
-  * no es un componente
+    * 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)
-== ngIf
+== directivas personalizadas
-  * elemento que queremos ocultar o mostrar
+  * para extender las capacidades del framework
-  * se le asigna algun expresión que retorne un boolean
+  * creamos nuestros propias directivas de atributo o directivas estructurales
-  * angular crea o descrea el elemento del DOM según marque la variable: <sxh javascript; title:ejemplo uso *ngIf><div *ngIf="mostrar" class="card text-white bg-primary mb-3" style="max-width: 100%;"></sxh>
-    * **mostrar** al estar vinculado a la directiva hace referencia a un atributo de la clase, si no, iría entre %%{{ }}%%
-    * binding de eventos:<sxh html; binding evento click><button (click)="mostrar = !mostrar" class="btn btn-outline-primary btn-block"></sxh>
-== ngFor
+=== directiva de atributo personalizada
-  * repite el elemento:<sxh html; title: ejemplo *ngFor><li *ngFor="let color of colores" class="list-group-item">{{color}}</li></sxh>
+  * queremos crear algo así:<sxh html><div appDestacado>Oferta de la semana</div></sxh>
-    * usamos un array **colores** defindo en la clas del componente:<sxh typescript>export class BodyComponent {
+  * usando el cli generamos el código genérico:<code bash>ng g[enerate] d[irective] directivas/destacado --spec=false</code>
-    mostrar = false;
+  * obtendremos algo así y le añadiremos las líneas marcadas:<sxh typescript; highlight:[7-12]>import { Directive } from '@angular/core';
-    colores: string[] = ['rojo','verde','azul'];
+@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>
-  * se pueden adicionar cosas:<sxh html; title: ejemplo *ngFor adicionado><li *ngFor="let color of colores; let i=index" class="list-group-item">{{i}} {{color}}</li></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]'
+})
-== ngIf-else + ngTemplate
+export class DestacadoDirective implements OnInit {
-<sxh html; title: ejemplo ngIf-else + ngTemplate 1><div *ngIf="numero % 2 == 0; else impar">
+    @Input('appDestacado') userColor: string;
-    <h1>Número {{ numero }} - Es par</h1>
+    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>
-<ng-template #impar>
-    <h1>Número {{ numero }} - Es impar</h1>
-</ng-template></sxh>
-<sxh html; title: ejemplo ngIf-else + ngTemplate 2>
-<div *ngIf="numero % 2 == 0; then par else impar"></div>
-<ng-template #par>
-    <h1>Número {{ numero }} - Es par</h1>
-</ng-template>
-<ng-template #impar>
-    <h1>Número {{ numero }} - Es impar</h1>
-</ng-template>
 </sxh>
-== ngStyle
+=== directiva estructural personalizada
-  * cambio de estilo de elementos HTML usando atributos de los componentes
+<code bash>ng g[enerate] d[irective] directivas/nult --skipTests</code>
-  * scope de actuación del CSS -> propio del componente, no efecta a otros
+  * 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
-  * añadir/quitar clases CSS según nuestro internés
+  * la directiva ha de tener un parámetro de entrada (a través de **@Input**)
-  * directivas personalizadas
+  * ejemplo:<sxh html; highlight:6-8>
-  * <code bash>ng c[reate] c[omponent] components/<component> -it -is --spec=false</code>
+<div class="container main.container">
-    * directorio **components** podría variar a nuestra conveniencia
+    <h1>Demo <small>directivas</small></h1>
-    * ''-it'': ?
+    <hr>
-    * ''-is'': ?
+    <app-clases></app-clases>
-    * ''--spec=false'': no crear ficheros de pruebas unitarias
+    <br><br>
+    <p *appMult="5">
-<sxh typescript; title: prueba ngStyle>
+        Saludos
-...
+    </p>
-template: `<p [ngStyle]="{'font-size': tam + 'px'}">Probando ngStyle...</p>`,
+</div>
-...
-export class NgStyleComponent implements OnInit {
-    tam: number =15;
-}</sxh>
-<sxh typescript; title: otra forma de ngStyle>
-template: `<p [style.fontSize]="'28px'">Probando ngStyle...</p>`
-</sxh>
-<sxh typescript; title: otra forma más de ngStyle>
-template: `<p [style.fontSize.px]="tam">Probando ngStyle...</p>`
 </sxh>
+<sxh typescript>
+import { Directive } from '@angular/core';
-== ámbito CSS
+@Directive({
-  * para evitar colisiones de estilos, angular se encarga de añadir atributos para que cada componente tenga sus propios estilos
+    selector: '[appMult]'
-  * si queremos estilos a nivel global, deberemos tocar **style.css**
+})
-== ngClass
+export class MultDirective {
-  * más usada y más flexibilidad que **ngStyle**
-  * sintaxis:
-    * <sxh typescript; title: ngClass><div [ngClass] ="'first second'">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="['first', 'second']">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="{'first': true, 'second': true}">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="stringExp | arrayExp | objExp">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="{'class1 class2 class3':true}">...</div></sxh>
-== procesos asíncronos (4.4)
+    constructor(
+        private templateRef: TemplateRef<any>,
-== ngSwitch
+        private viewContainer: ViewContainerRef) {
-== 4.5 Directivas personalizadas
-  * <code bash>ng g[enerate] d[irective] directivas/destacado --spec=false</code>
+            @Input() set appMult(numero: number) {
+                for (let i = 0; i < numero; i++) {
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+            }
+        }
+    }
+</sxh>