Функция триггера с источником событий

Question

Можно ли вызвать функцию в другом компоненте из текущего компонента с помощью EventEmitter в качестве своего рода обратного вызова? Например, после того, как я закончу sh запрос API, происходит успешное выполнение функции, например, так:

@Output() afterAPIRequest = new EventEmitter();

handleSuccess() {
   this.afterAPIRequest.emit();
}

Теперь я могу как-то перехватить это в другом компоненте и вызвать другую функцию, что-то вроде этого?

// when emitted, run this

refreshListIfEmitted() {
   this.refreshMyList();
}

Answer 1

используйте услугу

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

@Injectable()
export class MessageService {
  private _message: Subject<any>;

  constructor() {
    this._message = new Subject();
  }

  get changes(): Observable<any> {
    return this._message.asObservable();
  }

  set message(message: any) {
    this._message.next(message);
  }
}

один компонент

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.scss'],
})
export class OneComponent {
  constructor(private _http: HttpClient, private _message: MessageService) { }

  apiRequest(): void {
    this._http.get('end-point').subscribe(value => this._message.message = value);
  }
}

второй компонент

import { Component } from '@angular/core';

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.scss'],
})
export class TwoComponent {
  constructor(private _message: MessageService) {
    this._message.changes.subscribe(value => console.log(value));
  }
}