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

Question

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

У меня есть friends Ленивый загруженный модуль с контейнерным компонентом friends-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);
}

в компоненте списка друзей, подпишитесь на Subject источник событийобслуживания.

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

Answer 2

Вы можете передать его как @Input в ваш лениво загруженный компонент или представить изменения ввода через общую службу