使用主题和代理传递数据

Question

是否可以在服务中使用主题进行 2 向数据流？例如，假设我希望某个组件检索信息，然后通过服务 Subject 将其发布以供其他组件使用。

消费组件然后对该信息进行一些更改，然后重新发布它，以便原始组件可以检索更改。

这可以使用观察者模式吗？

另外，如果我想查看这些数据的变化（假设数据是通过数组传入的），我是否必须使用代理来完成此操作？

Answer 1

在组件之间传递数据时，我发现 RxJSBehaviorSubject非常有用。

您还可以使用常规 RxJSSubject通过服务共享数据，但这就是我更喜欢 BehaviorSubject 的原因。

1. 它将始终返回订阅的当前值 - 无需调用 onNext()。
2. 它有一个 getValue() 函数来提取最后一个值作为原始数据。
3. 它确保组件始终接收最新的数据。
4. 您可以使用行为主体上的asObservable() 方法从行为主体中获取可观察对象。
5. 参考这个了解更多

例子

在服务中，我们将创建一个私有的 BehaviorSubject 来保存消息的当前值。我们定义了一个 currentMessage 变量来处理这个数据流，作为一个被其他组件使用的可观察对象。最后，我们创建了调用 nextBehaviorSubject来更改其值的函数。

父组件、子组件和兄弟组件都接受相同的处理。我们在组件中注入 DataService，然后订阅 currentMessage observable 并将其值设置为等于 message 变量。

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

共享服务.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)
  }

}

父组件.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)
  }
}

兄弟组件.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");
  }

}