- PVSM.RU - https://www.pvsm.ru -
Руководство о том, как использовать Subject RxJS и BehaviourSubject RxJS для связи между компонентами Angular.
В этой статье я буду использовать RxJS, чтобы показать как компоненты взаимодействуют, когда они не знают друг друга или не имеют общих родительских / дочерних отношений.
Во многих фрэймворках, включая Angular, всегда возникает проблема взаимодействия компонентов, когда мы разделяем приложение на множество маленьких UI компонентов и привязываемся к родительскому элементу родительского элемента, чтобы слушать события.
В Angular мы используем Output() и Input(). В стандартных случаях этого достаточно, но когда нужно связать входящие данные и исходящие события с родительским компонентом, управление этим всем превращается в кошмар.
Нужно добавить кучу Input() и Output() ко многим уровням компонента – это требует больших усилий, рискованно и не всегда работает.
Одно из решений – использовать мэнеджер состояния – такой как Redux, NGRX или NGXS, чтобы помочь несвязанным компонентам обмениваться данными.
В этой статье я представлю два дополнительных способа для решения этой проблемы, не требующих использования дополнительных библиотек.
Чтобы продемонстрировать эти решения, я создам пример [1], в котором пользователь может щелкнуть элемент списка статей и отобразить подробности в другом компоненте.
Концепция очень проста. Вы создаёте сервис, события которого будут доступны везде.
Сервис распространяет события, а подписчики могут выполнить функцию обратного вызова, когда событие произошло. В этой статье я создам Транспорт событий с помощью RsJS Subject.
Каждый раз, когда пользователь нажимает на элемент списка статей, он генерирует событие и передает его с помощью Транспорта событий.
Этот код означает, что мы отправляем событие SelectArticleDetail вместе с информацией о статье.
Слушатель прослушает SelectArticleDetail и выполнит обратный вызов, передаст данные статьи в локальную переменную и отобразит их в пользовательском интерфейсе.
Идея в том, чтобы просто создать способ для передачи данных изнутри. То есть каждый раз при изменении какого-то значения наблюдатель узнает об этом и выполняет функцию обратного вызова.
Каждый раз, когда пользователь нажимает на элемент списка, он добавляет статью в хранилище.
Теперь, в компоненте детали, мы подпишемся на обновление хранилища, чтобы получить новое значение.
Я применял эти подходы во многих проектах. Вот несколько примеров, где это очень уместно:
Если у вас есть больше примеров, буду рад узнать о них. Учиться у других — отличный способ совершенствоваться.
Эта статья о двух способах взаимодействия между двумя или более несвязанными компонентами.
Мы используем Сервис-наблюдатель, чтобы подписаться на данные для простых случаев, и используем Транспорт событий, чтобы отправлять разные события разным слушателям.
Надеюсь, статья была полезна! Подписывайтесь на меня в Medium [2] и Twitter [3]. Не стесняйтесь комментировать и задавать вопросы. Буду рад помочь!
Автор: KiraJS
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/332892
Ссылки в тексте:
[1] пример: https://github.com/hoangtranson/sample-communication-subject
[2] Medium: https://medium.com/@transonhoang
[3] Twitter: https://twitter.com/transonhoang
[4] Источник: https://habr.com/ru/post/471100/?utm_campaign=471100&utm_source=habrahabr&utm_medium=rss
Нажмите здесь для печати.