Comunicación de componentes en Angular

Introducción

En esta publicación, aprenderá acerca de tres métodos para pasar datos entre componentes en Angular y cuál es el mejor enfoque según el escenario.

1. Pasar datos desde URL

Consideremos que estamos navegando de una página a otra en la que la página anterior se destruye y llegamos a otra página. Si no hay muchos datos que pasar (por ejemplo, el ID de un objeto), podemos usar la URL para pasar los datos.

Hay dos formas de pasar los datos a través de URL en Angular:

• Parámetros del enrutador
• Parámetros de consulta

Si el parámetro es obligatorio para el componente, entonces debemos usar el parámetro de enrutador . De lo contrario, podemos usar los parámetros de consulta .

Uso de parámetros del enrutador

Los parámetros del enrutador son obligatorios. Tenemos que registrar el parámetro con la URL en el módulo del enrutador de la siguiente manera:

módulo de enrutador de aplicaciones.ts

const routes: Routes = [  { path: 'list/:id', component: AppListComponent }];

En este ejemplo, listes la URL de la ruta y :ides el parámetro del enrutador que es obligatorio pasar y AppListComponentes el componente a montar en esa ruta.

Pasar parámetros del enrutador a través de routerLinkuna directiva

button  type="button"   [routerLink]="['/list', id]"  Show List/button

En este ejemplo, idla variable se inicializa en el código de ese componente y /listes la ruta por la que queremos navegar.

Pasar parámetros del enrutador a través routedel servicio

aplicación.componente.ts

id = 28;constructor (private router: Router) {}route() {  this.router.navigate(['/list', this.id]);}

Lectura de parámetros del enrutador

A continuación se explica cómo leer un parámetro de enrutador desde el componente al que se enruta:

lista de aplicaciones.componente.ts

constructor(  private activatedroute: ActivatedRoute) {  this.activatedroute.params.subscribe(data = {    console.log(data);  })}

Uso de parámetros de consulta

Los parámetros de consulta son opcionales. No es necesario registrar una URL independiente para ellos.

módulo de enrutador de aplicaciones.ts

const routes: Routes = [  { path: 'list', component: AppListComponent }];

En este ejemplo, listes la URL de la ruta y AppListComponentes el componente.

Pasar un parámetro de consulta a través de routerLinkuna directiva

button  type="button"  [routerLink]="['/list']"  [queryParams]="{id: '24'}"  Show List/button

En este ejemplo, ides la clave y 24es el valor estático. También puedes pasar un valor dinámico a través de una variable.

Pasar parámetros de consulta a través routedel servicio

aplicación.componente.ts

id = 28;constructor (private router: Router) {}route() {  this.router.navigate(['/list'], {queryParams: {id: this.id}});}

Lectura de parámetros de consulta

lista de aplicaciones.componente.ts

constructor(  private activatedroute: ActivatedRoute) {  this.activatedroute.queryParams.subscribe(data = {    console.log(data);  })}

Nota: Obtenga más detalles sobre los parámetros del enrutador Angular en este artículo .

2. Pasar datos a través de @Inputy@Output

Si queremos pasar datos de un componente hijo a un componente padre o de un componente padre a un componente hijo, podemos usar @Inputy @Output.

aplicación-padre.componente.html

app-child  [jsonData]="data"  (outputData)="data = $event"/app-child

Aquí datahay una variable inicializada en el código del componente.

componente-secundario.ts de la aplicación

import { Component, Input, OnInit } from '@angular/core';@Component({  selector: 'app-child',  template: ''})export class AppChild implements OnInit {  @Input()   jsonData;  @Output()  outputData = new EventEmitter();  constructor() {}  ngOnInit() {    console.log(this.jsonData);  }  emitData(data) {    this.outputData(data);  }}

De esta manera podemos pasar datos de hijo a padre y de padre a hijo.

Nota; Obtenga más detalles @Input()en este artículo y @Output()en este artículo .

3. Pasar datos a través de un servicio mediante observables

Si dos componentes son hermanos o el nivel de un componente en la jerarquía es más distante, entonces es bueno usar un servicio para pasar los datos usando observables.

Este ejemplo utiliza el tema RxJS para crear un observable:

aplicación.servicio.ts

import { Injectable } from '@angular/core';import { Subject } from 'rxjs';@Injectable({providedIn: 'root'})export class AppService {  observer = new Subject();  public subscriber$ = this.observer.asObservable();  emitData(data) {    this.observer.next(data);  }}

Para emitir los datos puedes llamar al emitDatamétodo de este servicio y para obtener los datos debes suscribirte subsciber$de esta manera:

constructor(private appService: AppService) {}ngOnInit() {  this.appService.subscriber$.subscribe(data = {    console.log(data);  });}

Conclusión

Y eso es todo por ahora, tres formas de pasar datos de un lado a otro entre tus componentes en Angular. ¡Ahora sigue adelante y crea algunos componentes increíbles!