Angular 2. Entrega 11. Composición de componentes

Los componentes se pueden combinar en Angular 2, formando un árbol. Micael Gallego, ha hecho un gráfico típico de como se pueden combinar los componentes en una aplicación. De esta forma se puede tener un equipo de personas trabajando en componentes distintos.

Vamos a suponer que tenemos un componente App que hace uso del componente Header. Para ello, vamos a suponer que el Header la vamos a delegar en un componente.

1. Declaración del componente en app.module.ts

Para ello en app.component.html se introduce al principio este código
<header></header>
que nos va a servir para referenciar a un componente con el "selector" igual a "header".

Ahora creamos dicho componente header.component.ts que tenga su templateUrl apuntando a header.component.html

Y por supuesto, no olvidar declarar dicho componente en app.module.ts, tanta en la parte de import como en la de declarations.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header.component';

@NgModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [BrowserModule, FormsModule, HttpModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ya que si no lo indicamos, el compilador no lo va a encontrar.

2. Comunicación del componente padre al hijo

1. El padre puede especificar propiedades en el componente hijo como si fuera un elemento nativo HTML. Por ejemplo creamos atributo1 . Veamos como queda app.component.html cuando llamamos a la etiqueta <header>

<header [atributo1]='variable1'></header>
<p> Otro contenido</p>

En este caso asignamos atributo1 a variable1 que tendrá que estar definida en el componente padre app.component.ts
...
export class AppComponent {
  variable1="Cabecera";
..
}

Pero en header.component.ts tenemos que definir atributo1 con la anotación @Input() , la cual se tendrá que definir en el import

import {Component, Input} from '@angular/core'
...
export class HeaderComponent {
   @Input()
  private atributo1: string;
  ..
}

Y ahora en header.component.html tiene que haber una referencia "moustache" a atributo1

<h1> {{atributo1}} <h1>

En efecto, y le inyectamos el valor "Cabecera" que contiene variable1 del componente padre al hijo.

3. Generación de eventos en el hijo que se atienden en el padre

Para ello vamos a crear un evento llamado "ocultar". En el componete padre creamos un método "ocultarContenido" que se ejecutará cuando se active dicho evento. Y lo que hace es hacer de "chivato" en la consola que ha recibido el evento. Veamos el componente padre app.component.ts

...

export class AppComponent {

  ocultarContenido (oculto: boolean) {

    console.log("He recibido el evanto. Ahora Ocultar=" + oculto)

  }

  ...

}

y el app.component.html tenemos que destacar el evento "ocultar" entre paréntesis, y la acción que realiza, pero en este caso el parámetro del método es $event !

<header (ocultar) = 'ocultarConteniodo($event)'></header>

<p>Otro contenido</p>

En cuanto al hijo  header.component.ts tenemos que declarar en el import además EventEmitter,y Output. También tenemos que usar la anotación @Output() a la variable ocultar que para inidicar que el evento se transmite al padre. dicha variable es del tipo EventEmitter de booleanos. Y definiremos el evento que será "click" del boton (del html) asociándole codigo que la función clickBoton(), en el cual aparece el evento oculto lanzando el método emit con un parámetro, para que el padre lo reciba

import {Component, Output, EventEmitter } from '@angular/core';

...

export class HeaderComponent {

  @Output()

  oculto = new EventEmitter<boolean>()

  

  visible = true; // Suponemos inicialmente que mostramos información.

  clickBoton () {

    this.visible= !this.visible;

    this.oculto.emit(this.visible)

  }

 ...

}

Donde el click del boton definido en el header.component.html

<h1 *ngIf=visible">Lo que queramos mostrar</h1>
<button (click)='clickBoton()'>Ocultar/Mostrar<button>

4. ¿Cuando crear un nuevo componente?

• Cuando la lógica o el template se hagan demasiado largos o complicados
• Cuando se puedan reutilizar en varios contextos.