如何订阅来自Angular 6中不同模块的输入的值更改？答案

【问题标题】：How to subscribe for value changes on an input from a different module in Angular 6?如何订阅来自Angular 6中不同模块的输入的值更改？
【发布时间】：2018-06-09 15:04:02
【问题描述】：

我有一个位于根 (app) 模块中的标头组件。搜索栏将根据激活的路线在标题中呈现。

我有 friends 延迟加载的模块，它带有一个 friends-list 容器组件，它提供了一个朋友列表。

我想通过订阅搜索栏输入上的值更改来向 friends-list 组件添加搜索功能。

如何将搜索栏值更改的可观察值提供给我的好友列表组件？

【问题讨论】：

您可以使用共享服务向 friend-list 组件发出 searchInputChange 事件。
我想到了这一点，但如何将值变化放在服务中可观察到？
是的，您可以在服务中添加一个Subject 变量，然后从共享服务中发出它。

标签： angular rxjs observable angular6

【解决方案1】：

利用shared服务将事件从search bar组件发送到friends-list组件。

在服务内部创建一个Subject，然后在输入更改时发出。

service.ts

public searchInputChanged : Subject<string> = new Subject<string>()

emitSearchInputChangesEvent(input) {
   this.searchInputChanged.next(input);
}

搜索栏组件：只需调用方法emitSearchInputChangesEvent(input)

public onChange (event) {
   this.service.emitSearchInputChangesEvent(event);
}

在好友列表组件中，订阅Subject服务的事件发射器。

this.service.searchInputChanged.subscribe((input)=> {
     console.log(input):
})

【讨论】：

是的，效果很好。您能否补充一下，为了共享服务，它必须有 @Injectable({ providedIn: 'root' }) 装饰器？只是为了确保每个人都能正确理解这一点。谢谢

【解决方案2】：

您可以将其作为 @Input 传递给您的延迟加载组件或通过共享服务公开输入更改

【讨论】：

如果两个组件不是父子组件，@Input 将不起作用。
OP 是否具体说明了他的情况？不。我是否使用了 OR 关键字的替代项？是的。