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

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 文档

//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)