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

Question

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

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

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

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

Answer 1

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

Answer 2

使用 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):
})

How to subscribe for value changes on an input from a different module in Angular 6?