Я хочу создать собственное событие, которое может запускаться из любого компонента и прослушиваться любым компонентом в моем приложении angular 7

Question

Я хочу создать пользовательское событие, которое может запускаться с любого компонента и прослушиваться любым компонентом в моем приложении angular 7

Предположим, у меня есть 1 компонент, в котором у меня есть кнопка, по которой я хочу нажатьвызвать мое пользовательское событие с некоторыми данными.Затем будет еще один компонент, который будет постоянно прослушивать это событие, когда он инициирует, он выполнит некоторый код и соответственно обновит пользовательский интерфейс.

Как мне его реализовать?

Answer 1

Ну, ну, хорошо, то, что вы ищете, это общая служба. Этот общий сервис будет иметь BehaviorSubject, который будет служить источником данных. Благодаря этому вы сможете выдвигать новые потоки данных. И тогда вы выставите это BehaviorSubject asObservable.

Затем вы получите subscribe на этот Observable от всех компонентов, где вы хотите прослушать изменения данных, и затем отреагируете соответственно.

Вот как это будет выглядеть в коде:

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

@Injectable()
export class SharedService {

  private data: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  data$: Observable<any> = this.data.asObservable();

  constructor() { }

  setData(newData) {
    this.data.next(newData);
  }

}

Теперь вы можете ввести SharedService в любой контроллер, который вы хотите, и вызвать setData из компонента, из которого вы хотите выдвинуть новые данные (см. AppComponent из Sample StackBlitz для получения дополнительной информации). И тогда вы также будете вводить SharedService в другие компоненты, и там вы будете subscribe до data$ в их ngOnInit (подробнее см. HelloComponent в Sample StackBlitz)

Вот Образец StackBlitz для вашей ссылки.