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

Метод 1: использование генераторов событий

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

1. В родительском компоненте определите источник событий:

import { Component, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="triggerChildren()">Trigger Child Components</button>
  `
})
export class ParentComponent {
  @Output() triggerEvent = new EventEmitter();
  triggerChildren() {
    this.triggerEvent.emit();
  }
}

1. В дочерних компонентах прослушайте событие и выполните желаемое действие:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <div>
      <!-- Child component content -->
    </div>
  `
})
export class ChildComponent {
  @Input() triggered: boolean;
  ngOnInit() {
    // Perform action when triggered
  }
}

Метод 2: использование ViewChild

Другой метод запуска нескольких дочерних компонентов — использование декоратора ViewChild. Этот метод позволяет получать ссылки на дочерние компоненты и напрямую вызывать их методы.

1. В родительском компоненте используйте ViewChild, чтобы получить ссылку на дочерние компоненты:

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="triggerChildren()">Trigger Child Components</button>
    <app-child></app-child>
    <app-child></app-child>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponents: ChildComponent[];
  triggerChildren() {
    this.childComponents.forEach(child => {
      child.performAction();
    });
  }
}

1. В дочерних компонентах определите метод для выполнения желаемого действия:

import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <div>
      <!-- Child component content -->
    </div>
  `
})
export class ChildComponent {
  performAction() {
    // Perform action when triggered
  }
}

Метод 3. Использование общей службы

Общая служба — еще один эффективный способ инициировать действия в нескольких дочерних компонентах. Служба действует как посредник между родительскими и дочерними компонентами, позволяя им обмениваться данными и обмениваться ими.

1. Создать общий сервис:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class SharedService {
  triggerEvent = new Subject();
  triggerAction() {
    this.triggerEvent.next();
  }
}

1. В родительский компонент внедрите общую службу и вызовите метод триггера:

import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="triggerChildren()">Trigger Child Components</button>
  `
})
export class ParentComponent {
  constructor(private sharedService: SharedService) {}
  triggerChildren() {
    this.sharedService.triggerAction();
  }
}

1. В дочерних компонентах подпишитесь на событие-триггер и выполните желаемое действие:

import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-child',
  template: `
    <div>
      <!-- Child component content -->
    </div>
  `
})
export class ChildComponent implements OnInit {
  constructor(private sharedService: SharedService) {}
  ngOnInit() {
    this.sharedService.triggerEvent.subscribe(() => {
      // Perform action when triggered
    });
  }
}

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

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