angular - 如何订阅 Angular 6 中不同模块输入的值变化？

Question

我有一个位于根(应用程序)模块中的 header 组件。根据激活的路线，搜索栏将呈现在标题中。

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

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

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

Answer 1

利用共享服务将事件从搜索栏组件发送到friends-list组件。

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

服务.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):
})