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 Templete

<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组件之间的事件

1 个答案: