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

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

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

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();
    }
}

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.

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();
    }
}

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 используя созданный выше сервис.

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();
    }
}

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();

}

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

Observable.subscribe()

Subject.next()

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

Запуск данного примерно локально

Angular Message Service

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

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

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

4 comments

Добавить комментарий для Роберто Отменить ответ

Observable.subscribe()

Subject.next()

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

Запуск данного примерно локально

Angular Message Service

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

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

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

Похожие статьи:

4 comments

Добавить комментарий для Роберто Отменить ответ