我应该在 Angular 的可重用组件中使用 EventEmitter 还是共享服务？

Question

在 Angular 中，我有一个可重复使用的 autocomplete 列表，我需要将选定的选项传递给调用此自定义组件的另一个组件。但是自定义组件并没有被直接调用，它们之间还有一个组件如下图：

Component A:          -->      Component B:       -->      Component C:      
custom-autocomplete            modal-component             employee-component

现在我认为有2个选项：

1. 我可以通过共享服务将选定的值从组件 A 传递到任何组件。但是我不确定将服务依赖项注入可重用组件是否是个好主意。

2. 我可以通过 EventEmitter 将选定的值传递给组件 B，但我不知道将发出的事件从组件 B 传递到Component C. 我想我可以像通常通过 EventEmitter 传递接收到的事件和参数一样传递，但不确定这是否是个好主意。

那么，遇到这种情况应该怎么办？

Answer 1

在我看来，您应该使用 BehaviourSubject 类型 observable 的共享服务。因此，每当用户将 select 任何值形式 autocomplerte 时，您就可以将 selected 选项传递给您的 BehaviourSubject observable 然后在您的另一个 component 你可以订阅 BehaviourSubject.

如果您想在一个 component 中使用多个可重复使用的 autocomplete，那么在传递每个 autcomplete's selected 值时，您可以传递一个属性命名为 type，您将在其中发送 autocomplete 类型。

就像你有这样的功能

passDataToAnotherComponent(selectedOption: any, type: string){
   this.dataService.passData({option : selectedOption, type: type})
}

因此，当您为城市调用上述函数时，您将像这样在模板中调用

<select (change)="passDataToAnotherComponent($event, 'city')">
   <option>City 1</option>
   <option>City 2</option>
</select>

<select (change)="passDataToAnotherComponent($event, 'department')">
   <option>department 1</option>
   <option>department 2</option>
</select>

然后在你的接收组件中这样做

ngOnInit(){
   this.dataService.behaviourSubjectObservableVariable.subscribe(data => {
       if(type === 'city){
            // do somehting
       }
       if(type === 'department){
            // do somehting
       }
   })
}

只是举个粗略的例子，让你明白。

我应该在 Angular 的可重用组件中使用 EventEmitter 还是共享服务？

Should I use EventEmitter or shared Service in a reusable component in Angular?

javascript

oop

eventemitter

behaviorsubject

angular