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

Question

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

Answer 1

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

这是我的实现方式：

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 类订阅了多个 observable，您应该使用 takeUntil 等解决方案取消订阅。

Answer 2

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)