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 [26/01/2020 10:20] – [3.8 directivas estructurales] matedevelopment: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 +  * 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> }</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> </div>
-<ng-template #impar> +</sxh>
-    <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> +=== directiva estructural personalizada 
-    <h1>Número {{ numero }} - Es par</h1> +<code bash>ng g[enerate] d[irective] directivas/nult --skipTests</code> 
-</ng-template> +  * 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**) 
-<ng-template #impar> +  * ejemplo:<sxh html; highlight:6-8> 
-    <h1>Número {{ numero }} - Es impar</h1> +<div class="container main.container"> 
-</ng-template>+    <h1>Demo <small>directivas</small></h1> 
 +    <hr> 
 +    <app-clases></app-clases> 
 +    <br><br> 
 +    <p *appMult="5"> 
 +        Saludos 
 +    </p> 
 +</div>
 </sxh> </sxh>
 +<sxh typescript>
 +import { Directive } from '@angular/core';
  
 +@Directive({
 +    selector: '[appMult]'
 +})
  
-== 4.1 directiva bgStyle +export class MultDirective {
-== 4.2 ámbito del css +
-== 4.3 ngClass+
  
-== 4.4 procesos asíncronos +    constructor( 
- +        private templateRef: TemplateRef<any>, 
-== 4.5 Directivas personalizadas +        private viewContainer: ViewContainerRef) { 
-  * <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>
  • development/angular/directivas.1580062803.txt.gz
  • Darrera modificació: 26/01/2020 10:20
  • per mate