Как подписаться на изменения значения на входе из другого модуля в Angular 6?

Question

У меня есть компонент заголовка, который находится в модуле root (app). Панель поиска будет отображаться в заголовке в зависимости от активированного маршрута.

У меня есть загруженный модуль друзей с компонентом контейнера списка друзей, который предоставляет список друзей.

Я хочу добавить функцию поиска в компонент списка друзей, подписавшись на изменения значений в строке поиска.

Как я могу обеспечить наблюдаемые изменения значения в строке поиска для моего списка друзей?

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 в ваш лениво загруженный компонент или выставить изменения ввода через общий сервис