angular - 使用主题和代理传递数据

Question

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

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

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

另外，如果我想观察这些数据的变化(假设数据是通过数组传入的)，我是否必须使用 proxy完成这个？

Answer 1

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

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

1. 它将始终返回订阅时的当前值 - 无需调用 onNext()。
2. 它有一个 getValue() 函数来提取最后一个值作为原始数据。
3. 确保组件始终接收最新数据。
4. 您可以使用 asObservable() 从行为主体中获取 observable 行为主体的方法。
5. Refer this for more

示例

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

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

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

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

}