Обработка событий между Angular компонентами - PullRequest
Новая
       28

Обработка событий между Angular компонентами

0 голосов
/ 21 апреля 2020

У меня есть 2 Angular компонента, один для отправки события, другой для обработки события.

Вот мой код для генерации события 

@Output() displayMessage: EventEmitter<number> = new EventEmitter();

.....

showMessage(args) {
    this.cellComponent = args.cell as IgxGridCellComponent;
    this.displayMessage.emit(this.cellComponent.rowIndex);
  }

Мне нужен другой компонент для обработки события, передающего полезную нагрузку методу в принимающем компоненте.

Это то, что я пробовал до сих пор, но я не могу заставить компонент обрабатывать событие

TabcontrolComponent 

@Input() messageToDisplay: number;

  public showMessage() {
    this.displayMessageHandler();
  }

  private displayMessageHandler() {
   //Invoke service
  }

Шаблон TabcontrolComponent 

<app-tabcontrol></app-tabcontrol> 
      //I assume I need to bind to the event here, some how!

Мне нужно обработать полезную нагрузку событий displayMessage и в конечном итоге передать ее методу showMessage ().

1 Ответ

1 голос
/ 21 апреля 2020

Вам необходимо связать его, используя синтаксис привязки событий, как показано ниже: 

<app-tabcontrol (displayMessage)="showMessage($event)"></app-tabcontrol>

Также получите полезную нагрузку в файле родительского компонента, как показано ниже:

TabcontrolComponent 

@Input() messageToDisplay: number;

  public showMessage(index: any) {   // cast it to type passed from children.
    this.displayMessageHandler();
  }

  private displayMessageHandler() {
   //Invoke service
  }
...