处理 Angular 个组件之间的事件

Question

我有 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() 方法。

Answer 1

您需要使用如下事件绑定语法来绑定它：

<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
  }

处理 Angular 个组件之间的事件

Handling Events between Angular components

eventemitter

angular