如何在Angular 6中的其他模块的输入上订阅值更改？

Question

我有一个位于根（应用程序）模块中的标头组件。 搜索栏将根据激活的路线显示在标题中。

我有朋友带朋友列表容器组件，提供好友列表延迟加载模块。

我想通过订阅搜索栏输入中的值更改来向好友列表组件添加搜索功能。

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

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

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

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

Answer 2

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