Subject в Angular: взаимодействие компонентов

May 27, 2018

Библиотека RxJS предоставляет простую и удобную систему для отправки и получения уведомлений. В классе Subject совмещена функциональность как Observable, так и Observer.

Например, касаясь Angular: есть два компонента, в одном из этих компонентов происходит какое-либо действие - отправка сообщения. Как оповестить второй компонент о том, что в первом было отправлено сообщение?

Применение Subject в Angular

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

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class TestSubjectService {

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

Компонент, в котором получаем сообщение.

message: any;
subscription: any;
constructor(private testSubjectService: TestSubjectService) {
    this.subscription = this.testSubjectService.getMessage().subscribe(message => {
        this.message = message;
    });
}
    
// нужно отписаться чтобы не выгружать память
ngOnDestroy(): void {
    this.subscription.unsubscribe();
}

Компонент, в котором отправляем сообщение.

constructor(private testSubjectService: TestSubjectService) {
}

// отправляем сообщение
testSubject() {
    let self = this;
    self.testSubjectService.sendMessage('Message from Test Component to Another Component!');
}

// очищаем сообщения
clearMessage(): void {
    this.testSubjectService.clearMessage();
}

Пример #2

Оба компонента объявляют зависимости от служб, но один компонент ожидает, что он будет получать объект Observable<SharedDtate>, а другой компонент приготовился получать объект Observer<SharedDate>.

@NgModule({
    providers: [{
        provide: SHARED_STATE,
        useValue: new Subject<SharedDate>()
    }]
})

В одном компоненте отправляем события:

constructor(
        @Inject(SHARED_STATE) private observer: Observer<SharedDate>) { }

toDo(k) {
    // компонент генерирует события, которые получает другой компонент
    this.observer.next(new SharedState(1, k));
}

В этом компоненте принимаем события:

constructor(
    @Inject(SHARED_STATE) private ourEvents: Observable<SharedDate>) {

    ourEvents
        .subscribe(u => {
            this.edit = u;
        });
}
Добавить комментарий
Комментарии:
ываыва
May 26, 2018
ываыва