Межкомпонентная связь с использованием субъектов в Angular

Субъект RxJS — это особый тип Observable, который позволяет передавать значения множеству наблюдателей. Субъекты похожи на EventEmitters: они поддерживают реестр многих слушателей. Когда мы говорим о Субъектах или любых наблюдаемых в целом, есть две вещи:

Отправитель
И приемник

В случае субъектов тот, кто вызывает метод «следующий», является отправителем, а тот, кто вызывает метод подписки, является получателем. Подписка не вызывает нового выполнения, которое доставляет значения, она просто регистрирует данный наблюдатель в списке наблюдателей для получения асинхронных данных. Поэтому всякий раз, когда кто-то вызывает следующий метод, вызывается обратный вызов в методе подписки.

Существует три типа предметов:

Тема — по умолчанию (и сфера действия этой статьи).
BehaviorSubject — который всегда имеет значение
ReplaySubject — хранит записи о прошлых значениях.

`Here` обсудим приложение чата:

Есть два компонента: отправитель сообщения и получатели (или получатели в случае группового чата).

Для связи между двумя компонентами нам нужно:

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

Шаг первый: создание общего сервиса

Вот общий сервис с двумя субъектами. Один для отправки сообщения от FirstComponent к SecondComponent и другой для обратного.

@Injectable({
  providedIn: 'root'
})
export class DataserviceService {
  messageFirst = new Subject();
  messageecond = new Subject();

  constructor() {
  }
}

Внедрите общий сервис в FirstComponent и SecondComponent, используя внедрение зависимостей следующим образом:

import {DataserviceService} from ‘../dataservice.service’;
export class FirstComponent implements OnInit {
constructor(private service: DataserviceService) {}
}

Аналогичным образом введите в SecondComponent.

Шаг второй: вызов следующего метода для отправки данных

Теперь по нажатию кнопки нам нужно получить последнее сообщение, создать метод отправки, который вызывается, а затем запускает следующий метод по теме:

FirstComponent:
send(message: string): void {
this.service.messagefirst.next(message);
}

И аналогично при отправке из SecondComponent в FirstComponent:

SecondComponent:
send(message: string): void {
this.service.messagesecond.next(message);
}

Шаг третий: Подписка на субъектов для получения данных

И последнее, но не менее важное: нам нужно подписаться на темы:

Первый компонент:

ngOnInit(): void {
    this.service.messageFirst.subscribe((param: string) => {
    // do something with the received message});
}

И аналогично получить во втором компоненте:

ngOnInit(): void {
    this.service.messageSecond.subscribe((param: string) => {
    // do something with the received message});
}

Шаг четвертый: отправка не только строки

Следующий метод поддерживает отправку только объекта — будь то строка, число, массив или любой объект Javascript. Если у вас есть несколько значений, мы можем создать интерфейс и передать его следующему методу.

interface Message {
    text: string;
    time: Date;
    Sender: string;
    Receiver: string;
}

Резюме

Связь между компонентами может быть достигнута с использованием общей службы и субъекта. Для этого вам необходимо:

Общий сервис для отправителя и получателя
Следующий вызов метода в отправителе
Вызов метода подписки в получателе.