Как перехватить событие из другого компонента Angular 8?

В Angular 8 вы можете перехватить событие из другого компонента используя сервисы и подписки на события.

1. Создайте сервис, который будет служить в качестве посредника для передачи события между компонентами. Например, назовем его EventService. Для этого воспользуемся декоратором @Injectable() и создадим свойство subject типа Subject<any>. Декоратор @Injectable() позволяет сервису быть инжектированным в другие компоненты.

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

@Injectable()
export class EventService {
  private subject = new Subject<any>();

  emitEvent(event: any) {
    this.subject.next(event);
  }

  getEvent() {
    return this.subject.asObservable();
  }
}

2. В компоненте, из которого вы хотите перехватывать событие, инъектируйте EventService. Создайте метод для реагирования на событие и подпишитесь на него.

import { Component, OnInit } from '@angular/core';
import { EventService } from 'путь-к-сервису';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  styleUrls: ['./component-a.component.css']
})
export class ComponentAComponent implements OnInit {
  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService.getEvent().subscribe(event => {
      // Ваш код реакции на событие
      console.log(event);
    });
  }
}

3. В компоненте, из которого вы хотите отправлять событие, также инъектируйте EventService. Создайте метод, который будет отправлять событие.

import { Component, OnInit } from '@angular/core';
import { EventService } from 'путь-к-сервису';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  styleUrls: ['./component-b.component.css']
})
export class ComponentBComponent implements OnInit {
  constructor(private eventService: EventService) {}

  ngOnInit() {}

  sendEvent() {
    // Создаем и отправляем событие
    const event = { data: 'Some data' };
    this.eventService.emitEvent(event);
  }
}

4. Добавьте соответствующие компоненты в ваш модуль, чтобы они были доступны для других компонентов.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ComponentAComponent } from './component-a/component-a.component';
import { ComponentBComponent } from './component-b/component-b.component';
import { EventService } from 'путь-к-сервису';

@NgModule({
  declarations: [AppComponent, ComponentAComponent, ComponentBComponent],
  imports: [BrowserModule],
  providers: [EventService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Теперь, когда вы вызываете метод sendEvent() в ComponentBComponent, событие будет перехвачено в ComponentAComponent и вы увидите в консоли данные события.

Это пример простого способа перехвата событий из другого компонента в Angular 8, используя сервисы и подписки на события. Вы можете использовать его как отправную точку для дальнейших модификаций и настройки в зависимости от ваших потребностей.