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

Question

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

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

现在有两个选项我认为：

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

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

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

Answer 1

在我看来，您应该使用一个共享服务，其中应该有BehaviourSubject类型的observable。因此，每当用户从autocomplerte中选择任何值时，您就可以将所选选项传递给您的BehaviourSubjectobservable，然后在另一个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
}
})
}

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