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

Question

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

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

我认为现在有两个选项：

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

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

那么，在这种情况下应该怎么做呢？

Answer 1

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

如果您想在一个component 中使用多个可重复使用的autocomplete，那么在传递每个autcomplete's 选定值时，您可以传递一个名为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
       }
   })
}

只是举了一个粗略的例子让你理解。