传递带有主题和代理的数据 [英] Passing Data with Subjects and Proxies

问题描述

是否可以在服务中使用主题"进行两种方式的数据流?例如，假设我希望某个组件检索信息，然后通过服务主题将其发布，以供其他组件使用.

Is it possible to have a 2 way data flow using Subjects in a service? Suppose for example that I want some component to retrieve information and then post it through the service Subject for other another component to consume.

使用方组件随后对该信息进行一些更改，然后重新发布，以便原始组件可以检索更改.

The consuming component then makes some changes to this information and then re-posts it so that the original component can retrieve changes.

使用观察者"模式可以做到这一点吗?

Is this possible using the Observer pattern?

此外，如果我想查看此数据的更改(例如，数据是通过数组输入的)，我是否必须使用

Also, if I wanted to watch this data for changes (let's say that the data came in through an array), would I have to use a proxy to accomplish this?

推荐答案

在组件之间传递数据时，我发现RxJS BehaviorSubject非常有用.

When passing data between components, I find the RxJS BehaviorSubject very useful.

您还可以使用常规RxJS Subject通过服务共享数据，但这就是为什么我更喜欢BehaviorSubject的原因.

You can also use a regular RxJS Subject for sharing data via a service, but here’s why I prefer a BehaviorSubject.

1. 它将始终返回订阅时的当前值-无需调用onNext().
2. 它具有getValue()函数，可将最后一个值提取为原始数据.
3. 它确保组件始终接收最新数据.
4. 您可以使用asObservable()从行为主题中获得可观察到的信息 行为主体的方法.
5. 请参阅此内容

1. It will always return the current value on subscription - there is no need to call onNext().
2. It has a getValue() function to extract the last value as raw data.
3. It ensures that the component always receives the most recent data.
4. you can get an observable from behavior subject using the asObservable() method on behavior subject.
5. Refer this for more

示例

在服务中，我们将创建一个私有的BehaviorSubject，它将保存消息的当前值.我们定义一个currentMessage变量，以将该数据流作为可观察的方式处理，并将由其他组件使用.最后，我们创建在BehaviorSubject上调用next的函数以更改其值.

In a service, we will create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable to handle this data stream as an observable that will be used by other components. Lastly, we create the function that calls next on the BehaviorSubject to change its value.

父，子和同级组件均接受相同的处理.我们将DataService注入组件中，然后订阅可观察的currentMessage并将其值设置为与message变量相等.

The parent, child, and sibling components all receive the same treatment. We inject the DataService in the components, then subscribe to the currentMessage observable and set its value equal to the message variable.

现在，如果我们在这些组件中的任何一个中创建一个函数来更改消息的值.更新后的值将自动广播到所有其他组件.

Now if we create a function in any one of these components that changes the value of the message. The updated value is automatically broadcasted to all other components.

shared.service.ts

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

@Injectable()
export class SharedService {

  private messageSource = new BehaviorSubject<string>("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
     {{message}}
   `,
   styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  message: string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }
}

sibling.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from "../shared.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message: string;

  constructor(private service: SharedService) { }

  ngOnInit() {
  }

  newMessage() {
    this.service.changeMessage("Hello from Sibling");
  }

}

这篇关于传递带有主题和代理的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！