Question

我有一项服务，可以在2个组件之间共享数据。该部分可以完美地工作，但是当服务触发某些事件（并将值传递给该组件）时，我现在需要调用组件A的方法。我怎样才能做到这一点？我读过一些较早的问题，这是一种错误的方法，但是由于我是菜鸟，所以我不知道该寻找什么解决方案。我需要使用可观察物吗？

Answer 1

Observables / Subjects是一种方法。您将在服务中拥有一个Subject，并在其上使用.next(value)来交换值。每个对该值感兴趣的组件都可以订阅该主题。
示例：（取自RxJS docs

//your Service
import { Subject } from 'rxjs';
const subject = new Subject<number>();

//Component A (and others as well)
service.subject.subscribe({
    next: (num) => console.log(num)
});
//this should work as well with prettier syntax:
service.subject.subscribe(sum =>
    console.log(num)
);

//Component B
service.subject.next(7) //passing number 7 to Component A

无论何时创建订阅，请确保始终取消订阅！否则，您最终可能会获得大量的订阅，所有订阅都会在同一组件中同时触发。

从个人经验来看，我发现将所有可能被认为是全局的函数和变量外包到专用服务中（如果可能）会更有帮助。如果您直接从组件中读取服务的变量（并在必要时进行修改），则将具有相同的效果。只要您保持适当的服务结构，该方法就起作用。可以在全球范围内使用的专用服务的一些示例是：

翻译（TranslationService）
权限管理（PermissionService）

Answer 2

我认为约瑟夫的想法是要走的路。

这是我的实现方式：

class FooService {
 private _newEvents = new Subject();
 newEvents$ = this._newEvents.asObservable();

 addNewEvent (ev) {
   this._newEvents.next(e);
  } 
}

// Allow `A` class to communicate with `B` class

class A {
 addEvent (ev) {
   this.fooService.addNewEvent(ev);
  }
}

class B {
 private subscription: Subscription;

 ngOnInit () {
  this.subscription = this.fooService.newEvents$
   .subscribe(e => {})
 }

 ngOnDestroy () {
  this.subscription.unsubscribe();
 }
}

请注意，如果您的B类订阅了多个可观察对象，则应使用takeUntil等解决方案来取消订阅。

如何将值从服务传递到组件的方法

2 个答案: