Angular: вызов функции в одном компоненте с событиями в другом компоненте

Question

Работая с Angular6, скажем, у меня есть 2 дочерних компонента A, B, которые оба являются частью родительского компонента P. Я хочу использовать ввод формы для компонента A, поэтому после щелчка строковое значение передаст и вызовет функцию компонента B что-то вроде этого возможно:

functionOnB(valueFromA: string) { //some code here; } 

это вообще возможно?

Я успешно передал данные между компонентами, используя EventEmitter от angular, но возможно ли вызывать функции с этими данными, а не просто передавать необработанную информацию?

Answer 1

Да, возможно, вы можете использовать декоратор @Input для передачи ссылки на компонент другому компоненту. Таким образом, вы можете вызывать методы ComponentB из ComponentA.

Например, внутри FirstComponent вы объявляете переменную экземпляра типа SecondComponent:

 @Input()
 second: SecondComponent;

И в вашем Parent HTML вы передаете ссылку на компонент:

 <app-first [second]="second"></app-first>
 <app-second #second></app-second>

Поваренная книга взаимодействия компонентов

Вот рабочий пример: Пример взаимодействия компонентов

Answer 2

Общая служба может использоваться для запуска события / функции из другого компонента. Например: событие click ComponentA вызовет метод службы. Затем этот метод службы должен генерировать другое событие. Затем ComponentB должен подписаться на источник событий службы. Пример кода: ChildA (HTML):

<button (click)="onClick()"></button>

ChildA Controller (TS):

  onClick() {
    this.commonService.AClicked('Component A is clicked!!');
  }

Общее обслуживание (TS):

import { Injectable, EventEmitter, Output } from '@angular/core';

@Output() aClickedEvent = new EventEmitter<string>();

AClicked(msg: string) {
  this.aClickedEvent.emit(msg);
}

ChildB Controller (TS):

  ngOnInit() {
    this.commonService.aClickedEvent
    .subscribe((data:string) => {
      console.log('Event message from Component A: ' + data);
    });
  }