Saltar al contenido

la comunicación componente angular usando Asunto (observable) Jan, 7thIn esta guía, vamos a aprender acerca de cómo comunicar …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de la forma de comunicarse entre los componentes de angularusing Asunto observable.

Asunto

Un sujeto es un tipo especial de observables que pueden actuar como observador y observable que significa que canpublish los datos usando el asunto y también acceder a los datos

Sujeto es también un observables de multidifusión que significa que cada observables pueden tener muchos observadores (abonados), mientras que los observables son normales unicast. la comunicación

Componente

En angular, que normalmente se comunican entre componentes utilizando @Input y decoradores @Output pero es un poco difícil de recordar. Si usted no sabe acerca de que el pago my tutorial anterior.

Ahora abre la aplicación de angulares y crear un nuevo archivo de llamadas y message.service.ts añadir el siguiente código.

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

@Injectable({
providedIn: 'root'
})

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

sendMessage(msg) { // it is used to publish data this.subject.next(msg); }
accessMessage() { // asObservable helps us to prevent the // leaks of Observable from outside of the subject return this.subject.asObservable(); }}

En el código anterior, primero importadas de países constructor de la biblioteca rxjs y ha añadido que a la propiedad en cuestión. Método

Dentro sendMessage estamos accediendo a la materia observable e invocando el método siguiente para publicar los nuevos datos.

El envío de datos

Ahora en nuestro componente de aplicaciones, estamos utilizando MessageSerive para enviar los datos a otros componentes.


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 los datos de componente secundario

Ahora podemos acceder a los mensajes AppComponent de la ChildComponent mediante la suscripción de la misma.

  • {{msg}}

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();
}
}

En su caso, si necesita acceder a los datos de más de un componente puede hacerlo mediante la creación de múltiples suscripciones y no se olvide de llamar al método de cancelación de suscripción cuando un componente destruye, de lo contrario, los observables son activos y crear pérdidas de memoria en su aplicación.