Общение между компонентами через Observable и Subject, Angular

Это будет короткий пост который покажет как сделать взаимодействие между компонентами Angular. Это была большая проблема для меня. Решение это использовать Observable и Subject (который отдельный вид Observable). Я не буду вдаваться в подробности про работу Observable, но есть 2 метода которые нам понадобиться: Observable.subscribe() and Subject.next().

Observable.subscribe()

Это метод который позволят подписаться на сообщения который отправит Observable.

Subject.next()

Данный метод позволяет отправлять сообщения ко всем кто следит за Observable.

Пример общения между компонентами Angular 2, 4, 5

Здесь простой пример который показывает общение между компонентами app через сервис используя Observable. (Так-же код доступен на GitHub).

История изменений:

  • 23 мая 2017 – Обновились до Angular 4.1.3
  • 01 декабря 2016 – Работало на Angular 2.2.1
Запуск данного примерно локально
  1. Установите NodeJS (> v4) and NPM (> v3) отсюда https://nodejs.org/en/download/, можно проверить установленную версию прописав в консоли команды node -v и npm -v.
  2. Скачайте код проекта с GitHub.
  3. Установите все зависимости проекта прописав в консоли команду npm install. Писать команду нужно в корневой директорий.
  4. Запустите приложение прописав команду npm start так-же в корневой директорий.

Angular Message Service

Данный сервис позволяет подписаться на сообщения, и отправить сообщения от любого компонента приложения.

Angular App Component который получит сообщения

App Component подпишется на новые сообщения отправленные Observable. И свойство message будет доступна во всём app-component.

Angular Home Component который отправит сообщения

Home-component будет отправлять сообщения к app-component используя созданный выше сервис.

Рекомендую материалы для изучения Angular

Данная статья является переводом, оригинал тут.

Просмотры: 3 125
(3 оценок, среднее: 5,00 из 5)
Загрузка...

2 comments

  1. Jamievot says:

    На мой взгляд это очень интересная тема. Предлагаю всем активнее принять участие в обсуждении.

Добавить комментарий

You have to agree to the comment policy.