Блог

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

В этом живом примере (StackBlitz) я хотел бы иметь возможность нажать кнопку в дочернем компоненте ( HeroProfileComponent ) и получить ее в родительском компоненте ( AdBannerComponent ).

Как я могу это сделать и является ли это признаком анти-шаблона?

Что вы можете сделать, так это добавить еще один ввод — функцию, которая может вызываться по щелчку дочерним элементом — аналогично тому, как вы передали data значение в своем примере stackblitz.

 (<AdComponent>componentRef.instance).data = adItem.data;
// similarly
(<AdComponent>componentRef.instance).clickEvent = this.clicked;

clicked($event) {
   console.log('Parent', $event)
}
 

А затем в AdComponent:

 @Input() data;
@Input() clickEvent: Function;

onClick() {
  this.clickEvent(this.data)
}
 

Это вызовет метод clicked в родительском элементе и позволит вам передавать данные родительскому элементу

stackblitz

Я думаю, что если вы используете eventemitter, вы должны решить свою проблему, я прилагаю изображение, которое может дать вам представление