Pasar datos con sujetos y proxies

¿Es posible tener un flujo de datos de 2 vías usando Temas en un servicio? Supongamos, por ejemplo, que quiero que algún componente recupere información y luego lo publique a través del servicio sujeto para que consum otro componente.

Luego, el componente consumidor realiza algunos cambios en esta información y luego vuelve a publicarla para que el componente original pueda recuperar los cambios.

¿Es esto posible usando el patrón Observer?

Además, si quería ver estos datos para ver los cambios (digamos que los datos entraban a través de una matriz), ¿tendría que usar un proxy para lograr esto?

Al pasar datos entre componentes, creo que RxJS BehaviorSubject muy útil.

También puede usar un Subject RxJS regular para compartir datos a través de un servicio, pero he aquí por qué prefiero un BehaviorSubject.

  1. Siempre devolverá el valor actual en la suscripción; no es necesario llamar a onnext ().
  2. Tiene una función getValue () para extraer el último valor como datos sin procesar.
  3. Asegura que el componente siempre reciba los datos más recientes.
  4. puede obtener un observable del sujeto de comportamiento utilizando el método asobservable() en el sujeto de comportamiento.
  5. Referir esto para más

Ejemplo

En un servicio, crearemos un BehaviorSubject privado que contendrá el valor actual del mensaje. Definimos una variable currentMessage para manejar esta secuencia de datos como un observable que será utilizado por otros componentes. Por último, creamos la función que llama a continuación en BehaviorSubject para cambiar su valor.

Los componentes padre, hijo y hermanos reciben el mismo tratamiento. Inyectamos DataService en los componentes, luego suscribimos el actualMessage observable y establecemos su valor igual a la variable del mensaje.

Ahora, si creamos una función en cualquiera de estos componentes, cambia el valor del mensaje. El valor actualizado se transmite automáticamente a todos los demás componentes.

shared.service.ts

 import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class SharedService { private messageSource = new BehaviorSubject("default message"); currentMessage = this.messageSource.asObservable(); constructor() { } changeMessage(message: string) { this.messageSource.next(message) } } 

parent.component.ts

 import { Component, OnInit } from '@angular/core'; import { SharedService } from "../shared.service"; @Component({ selector: 'app-sibling', template: ` {{message}}  `, styleUrls: ['./sibling.component.css'] }) export class SiblingComponent implements OnInit { message: string; constructor(private service: sharedService) { } ngOnInit() { this.service.currentMessage.subscribe(message => this.message = message) } newMessage() { this.service.changeMessage("Hello from Sibling") } } 

sibling.component.ts

 import { Component, OnInit } from '@angular/core'; import { SharedService } from "../shared.service"; @Component({ selector: 'app-sibling', template: ` {{message}}  `, styleUrls: ['./sibling.component.css'] }) export class SiblingComponent implements OnInit { message: string; constructor(private service: SharedService) { } ngOnInit() { this.service.currentMessage.subscribe(message => this.message = message) } newMessage() { this.service.changeMessage("Hello from Sibling"); } } 

Eso es totalmente posible:

  1. Averigua qué tipo de sujeto necesitas, sujeto normal, sujeto del comportamiento o tema de repetición. Cada uno tiene su propio caso de uso, recomendaría echarle un vistazo a esta pregunta para obtener una explicación clara y concisa: Angular 2 Observables especiales (Sujeto / Conducta sujeto / Sujeto de repetición) .

  2. Declara tu tema en un servicio.

  3. Llame a un valor next() en su componente principal que su segundo componente escuchará.

  4. A continuación, puede suscribirse a ese tema desde su componente secundario y modificarlo.

  5. Desde aquí puede llamar al next() valor en el mismo asunto utilizando los datos modificados o crear un tema separado en su servicio y usarlo para pasar sus datos modificados. En cualquiera de los casos, puede suscribirse en su componente principal para obtener esos datos. Sin embargo, recomendaría la opción posterior ya que supongo que si modifica los datos, cambiará el objeto y es bueno escribir estrictamente sus temas para detectar errores.

Espero que esto ayude.