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

Методы доступа к методам дочерних компонентов:

1. ViewChild:
   Декоратор ViewChild позволяет родительскому компоненту получать доступ к свойствам и методам дочернего компонента. Начните с импорта декоратора ViewChild из модуля @angular/core. Затем объявите свойство ViewChild в родительском компоненте, указав тип дочернего компонента. Наконец, используйте свойство родительского компонента для доступа к методам дочернего компонента. Вот пример:

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;
  ngAfterViewInit() {
    this.childComponent.childMethod();
  }
}

2. ElementRef:
   Класс ElementRef, импортированный из модуля @angular/core, обеспечивает прямой доступ к элементу DOM, представляющему дочерний компонент. С помощью ElementRef вы можете получить доступ к методам, определенным в классе дочернего компонента. Однако важно отметить, что доступ к методам таким образом обходит механизм обнаружения изменений Angular. Вот пример:

import { Component, ElementRef, AfterViewInit } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent implements AfterViewInit {
  constructor(private elementRef: ElementRef) {}
  ngAfterViewInit() {
    const childComponent = this.elementRef.nativeElement.querySelector('app-child');
    childComponent.childMethod();
  }
}

3. Event Emitter:
   Техника Event Emitter позволяет дочернему компоненту излучать пользовательские события, на которые может подписаться родительский компонент. Определив пользовательское событие в дочернем компоненте и подписавшись на него в родительском компоненте, вы можете запускать методы дочернего компонента из родительского компонента. Вот пример:

Дочерний компонент:

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <button (click)="onButtonClick()">Click Me</button>
  `
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter();
  onButtonClick() {
    this.customEvent.emit();
  }
  childMethod() {
    console.log('Child method called!');
  }
}

Родительский компонент:

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child (customEvent)="onChildEvent()"></app-child>
  `
})
export class ParentComponent {
  onChildEvent() {
    console.log('Parent received child event.');
    // Call child component's method
    // this.childComponent.childMethod();
  }
}