Comunicación entre componentes
Tipos de comunicación entre componentes:
- Padres a hijos con @Input.
- Hijos a padres con @Output.
- Mediante servicios.
Comunicación entre componentes padres a hijos con @Input
Vamos a pasar el nombre, el apellido y la dirección de una clase padre a una clase hijo usando el decorador @Input ().
Para ello creamos dos componentes llamados padre e hijo:
- ng generate component padre
- ng
generate component hijo
En la plantilla principal del component hacemos que el padre sea hijo del componente principal de la aplicación:
app.component.html:
<app-padre></app-padre>
Definición del padre:
En la clase del componente padre creamos las variables nombre, apellido y dirección con sus correspondientes valores.
padre.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-padre',
templateUrl: './padre.component.html',
styleUrls: ['./padre.component.css']
})
export class PadreComponent implements OnInit {
nombre = 'Juan';
apellido = 'Garcia';
direccion = 'C/la oca';
constructor() { }
ngOnInit() {
}
}
En la plantilla del componente padre vamos a vincular cada propiedad con los valores de las variables definidas en el modulo del componente.
padre.component.html:
<h1>Mi formulario</h1>
<app-hijo
[nombre]="this.nombre"
[apellido]="this.apellido"
[direccion]="this.direccion"
>
</app-hijo>
Definición del hijo:
Importamos el decorador Input, que está en "@angular/core":
import { Component, OnInit, Input } from '@angular/core';
Dentro del componente hijo en el decorador @Input, declaramos las propiedades definidas en la plantilla del padre.
hijo.component.ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-hijo',
templateUrl: './hijo.component.html',
styleUrls: ['./hijo.component.css']
})
export class HijoComponent implements OnInit {
@Input() nombre: string;
@Input() apellido: string;
@Input() direccion: string;
constructor() {
}
ngOnInit() {
}
}
La plantilla del componente hijo:
A traves del decorador @Input se renderizan los valores de la propiedad en la plantilla del del hijo.
<p>
Nombre: {{nombre}}
<br>
Apellido: {{apellido}}
<br>
direccion: {{direccion}}
<br>
</p>
Comunicación entre componentes hijos a padres con @Output
Vamos a pasar un dato de una clase hijo a una clase padre mediante un evento.
Para ello creamos dos componentes llamados padre e hijo:
- ng generate component padre
- ng generate component hijo
El componente hijo va a generar un evento hacia el padre, para avisarle de un suceso.
El componente padre va a capturar el evento del hijo y lo va a renderizar.
Vamos a usar el decorador @Output () en el componente hijo que va emitir el evento hacia el padre donde vamos a usar una propiedad de EventEmitter.
Definición del hijo
hijo.component.ts:
import { Component, OnInit, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-hijo',
templateUrl: './hijo.component.html',
styleUrls: ['./hijo.component.css']
})
export class HijoComponent implements OnInit {
@Output () enviarPadre = new EventEmitter<string>();
constructor() {
}
ngOnInit() {
}
pulsar(value: string) {
this.enviarPadre.emit(value);
}
}
hijo.component.html:
<button (click)="pulsar('Boton pulsado')">Pulsar</button>
Definicion del padre:
padre.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-padre',
templateUrl: './padre.component.html',
styleUrls: ['./padre.component.css']
})
export class PadreComponent implements OnInit {
valor: string;
constructor() {
}
ngOnInit() {
}
mostrarDato(value: string) {
this.valor = value;
}
}
padre.component.html:
<p>Componente Padre</p>
<app-hijo (enviarPadre)= mostrarDato($event)></app-hijo>
<br>
{{this.valor}}
Mediante servicios
Creamos un servicio utilizando el siguiente comando:
ng g service myservice
En el imports de app.module.ts:
- Importamos el servicio
- Lo insertamos en el providers:
Dentro de MyserviceService:
myService.sevice.ts:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyserviceService {
nombre: string;
constructor() { }
setNombre(no: string) {
this.nombre = no;
}
getNombre() {
return this.nombre;
}
}
Creamos un atributo llamado nombre con sus get y set correspondientes.
Después creamos dos componentes:
ng generate component unong generate component dosEn cada componente inyectamos el servicio creado en el constructor
miServicio: MyserviceService;
constructor(mi: MyserviceService) {
this.miServicio = mi;
}
El componente uno le va a pasar el valor ‘Juan’ al método set del servicio y el componente 2 lo va a obtener del método get del servicio y lo va a renderizar:
uno.component.ts:
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from '../myservice.service';
@Component({
selector: 'app-uno',
templateUrl: './uno.component.html',
styleUrls: ['./uno.component.css']
})
export class UnoComponent implements OnInit {
miServicio: MyserviceService;
constructor(mi: MyserviceService) {
this.miServicio = mi;
}
ngOnInit() {
this.miServicio.setNombre('Pedro');
}
}
dos.component.ts:
import { Component, OnInit } from '@angular/core';
import { MyserviceService } from '../myservice.service';
@Component({
selector: 'app-dos',
templateUrl: './dos.component.html',
styleUrls: ['./dos.component.css']
})
export class DosComponent implements OnInit {
miServicio: MyserviceService;
miNombre: string;
constructor(mi: MyserviceService) {
this.miServicio = mi;
}
ngOnInit() {
this.miNombre = this.miServicio.getNombre();
}
}
dos.component.html:
<p>{{this.miNombre}}</p>