将事件从子组件传递到父组件-Angular答案

【问题标题】：Passing events from Child to Parent Component-Angular将事件从子组件传递到父组件-Angular
【发布时间】：2018-04-16 18:06:13
【问题描述】：

我是 Angular 新手，这是我的问题：

我有一个子组件，我在其中处理网格的单元格单击事件，在回调中我有一个 EventEmitter 并声明为 @Output() cellClicked :any;。我在回调函数中实例化 EventEmitter，如下面的示例代码所示：

        onCellClicked($event){
            this.cellClicked = new EventEmitter();
            this.cellClicked.emit($event);  
        }

在父组件模板中我已经放置了这个网格

    <data-grid 
        [gridData]="restrictionsAll.restrictions" 
        [columnDefinitionsPath]="restrictionsAll.agGridConfigPath" 
        (getApi)="getGridApi($event)" 
         >
    </data-grid>

在父组件的 component.ts 中，我试图捕获发出的事件。

    cellClicked($event)
         {
            console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
      }

当我调试代码控件时，它到达了子组件中的断点，但它没有在cellClicked 方法中传递给父组件。感谢您在这方面的帮助。

【问题讨论】：

标签： angular components interaction eventemitter

【解决方案1】：

因为你没有在任何地方实现事件

在你的容器父组件中

<data-grid 
    (cellClicked)="cellClickedInParent($event)"
    [gridData]="restrictionsAll.restrictions" 
    [columnDefinitionsPath]="restrictionsAll.agGridConfigPath" 
    (getApi)="getGridApi($event)" 
     >
</data-grid>

在父组件中处理事件

cellClickedInParent(event){
   console.log(event) //////// this works
}

【讨论】：