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:44] – [angular: directivas] mate
+++ development:angular:directivas [09/02/2020 14:46] (actual) – mate
@@ Línia 23: / Línia 23: @@
 export class DestacadoDirective {
-    constructor( privete el: ElementRef) {
+    constructor( private el: ElementRef) {
          const nativeElement = el.nativeElement;
          nativeElement.style.fontSize = '28px';
@@ Línia 31: / Línia 31: @@
     }
 }</sxh>
-    * **ElementRef** no 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]])
+    * **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>