Comunicación de componentes angulares mediante el sujeto (observable)

Comunicación de componentes angulares mediante el sujeto (observable)

En este tutorial, aprenderemos a comunicarnos entre componentes de Angular usando Subject observable.

Índice
  1. Sujeto
  2. Comunicación de componentes
  3. Enviando datos
  4. Acceder a datos de componentes secundarios

Sujeto

Un sujeto es un tipo especial de observable que puede actuar tanto como observador como observable, lo que significa que podemos publicar los datos usando Subject y también acceder a datos

El sujeto también es un observable de multidifusión, lo que significa que cada observable puede tener muchos observadores (suscriptores), mientras que los observables normales son de unidifusión.

Comunicación de componentes

En Angular, normalmente nos comunicamos entre componentes usando @Input Y @Output decoradores, pero es un poco difícil de recordar. Si no lo sabes, echa un vistazo a mi tutorial anterior.

Ahora abra su aplicación Angular y cree un nuevo archivo llamado message.service.ts y agregue el código a continuación.

mensaje.servicio.ts

import { Subject } from 'rxjs';import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})

export class MessageService {    private subject = new Subject();

    sendMessage(msg) {                 this.subject.next(msg);    }
    accessMessage() {                        return this.subject.asObservable();    }}

En el código anterior, primero importamos Subject builder de la biblioteca rxjs y lo agregó al subject propiedad.

Al interior sendMessage método al que accedemos subject observable e invocando el siguiente método para publicar los nuevos datos.

Enviando datos

Ahora en nuestro App componente, usamos MessageService para enviar los datos a otros componentes.

aplicación.componente.html

<div class="center">
  <input [(ngModel)]="msg" placeholder="Enter message" />  <button (click)="addMessage()">Add message</button>
  <app-child></app-child></div>

aplicación.componente.ts

import { Component} from '@angular/core';
import { MessageService } from './message.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  msg;
  constructor(private msgService: MessageService) { }
  addMessage() {
    this.msgService.sendMessage(this.msg);    this.msg = '';
  }
}

Acceder a datos de componentes secundarios

Ya podemos acceder a la AppComponent mensaje del ChildComponent suscribiéndote a él.

niño.componente.html

<ul>
    <li *ngFor="let msg of msgList">{{msg}}</li></ul>

child.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  msgList = [];  subscription;
  constructor(private msgService: MessageService) { }

  ngOnInit() {
   this.subscription = this.msgService.accessMessage().subscribe(      (msg) => {        this.msgList.push(msg);      }    );  }

   ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}



ejemplo de transmision de datos

En su caso, si necesita acceder a datos de múltiples componentes, puede hacerlo creando múltiples suscripciones y no olvide llamar unsubscribe método cuando un componente se destruye, de lo contrario, los observables están activos y crean pérdidas de memoria en su aplicación.

Si quieres conocer otros artículos parecidos a Comunicación de componentes angulares mediante el sujeto (observable) puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas