В приложениях Angular родительские и дочерние компоненты обычно взаимодействуют друг с другом. Один из способов добиться этого — отправить выходные события из дочернего компонента в его родительский компонент. В этой статье мы рассмотрим различные методы отправки выходных данных Angular и запуска событий кликов в родительских компонентах. Мы предоставим примеры кода для каждого метода, что позволит вам реализовать их в своих проектах.

Метод 1: EventEmitter и декоратор вывода
Angular предоставляет класс EventEmitter и декоратор вывода для облегчения взаимодействия между родительскими и дочерними элементами. Вот пример:

В дочернем компоненте:

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendEvent()">Send Event</button>
  `,
})
export class ChildComponent {
  @Output() clickEvent = new EventEmitter<void>();
  sendEvent() {
    this.clickEvent.emit();
  }
}

В родительском компоненте:

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child (clickEvent)="handleClickEvent()"></app-child>
  `,
})
export class ParentComponent {
  handleClickEvent() {
    // Handle the click event here
  }
}

Метод 2: ViewChild и ElementRef
Другой подход — использовать ViewChild и ElementRef для доступа к элементу DOM дочернего компонента и присоединения к нему прослушивателя событий щелчка. Вот пример:

В шаблоне родительского компонента:

<app-child #childComponent></app-child>

В классе родительского компонента:

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="handleClickEvent()">Send Event</button>
    <app-child></app-child>
  `,
})
export class ParentComponent {
  @ViewChild('childComponent') childComponentRef: ElementRef;
  handleClickEvent() {
    const childElement = this.childComponentRef.nativeElement;
    childElement.click();
  }
}

Метод 3: Служба и субъект/BehaviorSubject
Использование службы с субъектом или BehaviorSubject — это еще один способ обеспечить связь между родительским и дочерним компонентами. Вот пример:

В общем сервисе:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class EventService {
  private clickEventSubject = new Subject<void>();
  clickEvent$ = this.clickEventSubject.asObservable();
  sendClickEvent() {
    this.clickEventSubject.next();
  }
}

В дочернем компоненте:

import { Component } from '@angular/core';
import { EventService } from './event.service';
@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendEvent()">Send Event</button>
  `,
})
export class ChildComponent {
  constructor(private eventService: EventService) {}
  sendEvent() {
    this.eventService.sendClickEvent();
  }
}

В родительском компоненте:

import { Component, OnDestroy } from '@angular/core';
import { EventService } from './event.service';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `,
})
export class ParentComponent implements OnDestroy {
  private subscription: Subscription;
  constructor(private eventService: EventService) {
    this.subscription = this.eventService.clickEvent$.subscribe(() => {
      this.handleClickEvent();
    });
  }
  handleClickEvent() {
    // Handle the click event here
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

В этой статье мы рассмотрели несколько методов отправки выходных данных Angular и запуска событий кликов в родительских компонентах. Мы рассмотрели декораторы EventEmitter и Output, ViewChild и ElementRef, а также использование службы с Object/BehaviorSubject. Каждый метод имеет свои преимущества и может использоваться в зависимости от ваших конкретных требований. Реализуя эти методы, вы можете установить эффективную связь между родительскими и дочерними компонентами в ваших приложениях Angular.