Это будет короткий пост который покажет как сделать взаимодействие между компонентами 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
Запуск данного примерно локально
- Установите NodeJS (> v4) and NPM (> v3) отсюда https://nodejs.org/en/download/, можно проверить установленную версию прописав в консоли команды
node -v и
npm -v
. - Скачайте код проекта с GitHub.
- Установите все зависимости проекта прописав в консоли команду npm install. Писать команду нужно в корневой директорий.
- Запустите приложение прописав команду npm start так-же в корневой директорий.
Angular Message Service
Данный сервис позволяет подписаться на сообщения, и отправить сообщения от любого компонента приложения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {Subject} from 'rxjs/Subject'; @Injectable() export class MessageService { private subject = new Subject<any>(); sendMessage(message: string): void { this.subject.next({ text: message }); } clearMessage(): void { this.subject.next(); } getMessage(): Observable<any> { return this.subject.asObservable(); } } |
Angular App Component который получит сообщения
App Component подпишется на новые сообщения отправленные Observable. И свойство message будет доступна во всём app-component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import {Component, OnDestroy} from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; import {MessageService} from './_services/index'; @Component({ moduleId: module.id, selector: 'app', templateUrl: 'app.component.html' }) export class AppComponent implements OnDestroy { message: any; subscription: Subscription; constructor(private messageService: MessageService) { // подписываемся на сообщения this.subscription = this.messageService.getMessage().subscribe(message => { this.message = message; }); } ngOnDestroy(): void { // нужно отписаться чтобы не выгружать память this.subscription.unsubscribe(); } } |
Angular Home Component который отправит сообщения
Home-component будет отправлять сообщения к app-component используя созданный выше сервис.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import {Component} from '@angular/core'; import {MessageService} from '../_services/index'; @Component({ moduleId: module.id, templateUrl: 'home.component.html' }) export class HomeComponent { constructor(private messageService: MessageService) {} sendMessage(): void { // отправляем сообщения ко всем кто подписался через observable subject this.messageService.sendMessage('Message from Home Component to App Component!'); } clearMessage(): void { // очищаем сообщения this.messageService.clearMessage(); } } |
Рекомендую материалы для изучения Angular
Так-же хотел Вам рекомендовать статью про Топ 10 самых популярных и продоваемых брендов одежды в мире.
Данная статья является переводом, оригинал тут.
Уберите ссылку с комментария выше. Это спам)
Роберто здравствуйте, какую ссылку убрать? Имеете в виду комментарий автора Jamievot?
На мой взгляд это очень интересная тема. Предлагаю всем активнее принять участие в обсуждении.
Согласен, тема интересная.
Спасибо за комментарий.