Joan: /* Comunicación entre componentes: Inputs y Outputs */

2019-03-21T18:06:51Z

Comunicación entre componentes: Inputs y Outputs

Pàgina nova

__TOC__
Usaremos Angular CLI para crear nuestra aplicación, ejecutando en consola los comandos

*Generar un componente:
<pre>
$ ng generate component nombre
</pre>
o
<pre>
$ ng g c nombre
</pre>
=Interpolación y property data binding=
==Live Databinding==
Cuando el valor cambia en el componente, automáticamente se refleja en el template.

El flujo de información es: ocurre algo en el componente y queremos que el template lo refleje automáticamente.

Con sintaxis así, con el nombre de interpolación:
<pre>
property="{{value}}" // <img src="{{url}}">
</pre>
O así, con el nombre de property data binding:
<pre>
[property]="value" // <img [src]="url">
</pre>
Los valores de las propiedades pueden ser variables del componente o llamadas a métodos.

En concreto es un lenguaje de expresiones, que es evaluado y transformado a cadena.

Podemos hacer
<pre>
textContent={{1 + 1 + getVal()}}
</pre>
'''No se permite efectos secundarios''' (assignments, new(), ‘;’, ++). No sabemos cuantas veces se van a evaluar. Los cálculos o llamadas deberían ser rápidas, simples y siempre devolver lo mismo (sin estado mutable).

No se permite usar el namespace global (Math, window.)

==Ejemplos de sintaxis==
<pre>
disabled={{expression}} == [disabled]=”expression”
<p [textContent]="user.name"> == <p>{{user.name}}
<img [src] = "url">
<app [talk]="talk"></app>
<div [ngClass] = "{selected: isSelected}"></div>
<button [style.color] = "isSpecial ? 'red' : 'green'">
<div [class.special]="isSpecial">Special</div>
</pre>
==Propiedades DOM vs attributos HTML==
Los atributos HTML inicializan propiedades DOM cuando la web se carga. Luego ya no cambian. Por JS podemos cambiar la propiedad DOM.

Angular (2,4,…) trabaja a nivel de propiedades DOM salvo:

*Atributos sin propiedades DOM: colspan, atributos de aria (accesibilidad).
==Interpolación de estilos==
Con sintaxis específica:
<pre>
[style.color]="method(value)" // devolviendo 'red'
[style.color]="propiedad" // devolviendo 'red'
[style.background-color]="propiedad"
</pre>
O referenciar a un objeto completo:
<pre>
[ngStyle] = "propiedad" // {'background-color': 'red'}
</pre>

=Event binding=
El flujo complementario al de interpolación: ocurre algo en el template y queremos que el componente lo sepa.

La sintaxis es con paréntesis (DOM_EVENT)=”METODO_EN_EL_COMPONENTE”

HTML:
<pre>
<button (click)="onClickMe()">fav</button>
</pre>
Javascript:
<pre>
onClickMe() {
console.log('click!')
}
</pre>
Podemos pasar variables y constantes al método llamado:
<pre>
<button (click)="onClickMe('valor', variable)">fav</button>
</pre>
Y podemos referenciar todo el elemento del DOM que originó el event binding con la variable ''$event''
<pre>
<button (click)="onClickMe($event)">fav</button>
</pre>
Eso imprime un evento del DOM, en este caso click. Por la referencia del evento del DOM, en target.value está el valor del input que originó el evento.
Por lo que podríamos leer el valor accediento a ''$event.target.value''.

==Local template identifier==
Con la sintaxis de corchete (#) podemos definir variables en nuestro template, que apuntan al elemento del DOM en el que definimos las variables:
<pre>
<input #search (keyup)="onKey(search.value)">
</pre>
==Template statements==
*Soportan efectos secundarios (es dónde deberíamos hacerlos, no en la interpolación)
*Soporta '';'' y asignaciones
*No soporta new(), ++, +=, console.log or pipes

=Directivas=
Componente sin template anotadas con @Directive

Hay varios tipos de directivas pero en general vamos a utilizar directivas estructurales, que manipulan el template de un componente. Ya sea repitiéndolo (ngFor) o mostrándolo o no (ngIf).

==*ngFor==
Para iterar elementos (arrays, iterables…)
<pre>
<div *ngFor="let talk of talks">

{{talk.title}}

</div>
</pre>
Hay variables para acceder a propiedades útiles de nuestro array:
*index
*odd
*even
*first
*last
*trackby (para reciclar filas por rendimiento)
<pre>
<div *ngFor="let talk of talks;let i = index;let odd = odd;let first = first">

</div>
</pre>
==*ngIf==
Elimina del DOM

Totalmente distinto de cambio de visibilidad a hidden/visible, *ngIf elimina del árbol DOM el componente (no aparece si hacemos view source).
<pre>
<div *ngIf="PROPIEDAD_DEL_COMPONENTE">

</div>
</pre>

=Comunicación entre componentes: Inputs y Outputs=
Angular está basado en una jerarquía de componentes basada en el selector (especificado en el componente y usado en el template).

Tenemos que hacer componentes pequeños que se comunican entre sí.

==Inputs==
Comunicación de un componente padre a otro componente hijo, la sintaxis es:

En el template padre:
<pre>
<component-hijo [nombre_variable]="valor" />
</pre>
En el componente hijo:
<pre>
@Input() nombre_variable
</pre>
Es la misma sintaxis que el property data binding!.

Es importante comentar que los inputs NO se evalúan en el constructor, lo hacen después de haberse construido el componente.

Podemos leerlo en el método ngOnInit

==Outputs==
Comunicación hijo -> padre. Transmitimos información de un componente hijo a su padre, a través de eventos.

La sintaxis es:

En el componente hijo:
<pre>
@Output() nombre_variable = new EventEmitter<any>()
</pre>
Y cuando se origine el evento, también en el componente hijo:
<pre>
this.nombre_variable.emit(VALOR)
</pre>
En el template padre:
<pre>
<component-hijo (nombre_variable)=metodo($event) />
</pre>
Y en el componente padre:
<pre>
metodo(evento) {...}
</pre>
El flujo es más complicado porque definimos un Output, emitimos el evento (cuando suceda lo que queremos emitir, un click, mouseover…) y en el template padre escuchamos con ().

Es la misma sintaxis que el event binding!.
{{Autor}}, març 2019

IIIa. Angular 4 Openwebinars - Historial de revisió

Joan: /* Comunicación entre componentes: Inputs y Outputs */