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

Question

我有一个位于根（app）模块中的标头组件。搜索栏将在标题中呈现，具体取决于激活的路径。

我有朋友延迟加载模块，其中包含 friends-list 容器组件，提供朋友列表。

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

如何向search-list组件提供搜索栏值更改的可观察性？

Answer 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);
}

在friend-list组件中，订阅Subject事件发起者服务。

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

Answer 2

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