如何发出带有值的对象

Question

我有一个 EventEmitter 并且我正在发出一个对象，如下所示：

@Output() cellClick = new EventEmitter();
private _cellClicked(data: any){
      let emitData: any = {
        colId: data.column.colId,
        rowId: data.node.id,
        item: {}
      };
      if (emitWithdata){
          this.cellClick.next(emitData); // Here  i need to send my data also, and it need to append to the value Data.item=data not just the Data object.
      } 
      if (emitWithNodata){
              this.cellClick.next(emitData); // here i just pass the emitData with empty item, which is correct
      }


}

如何使用emitData传递数据？有什么想法吗？提前致谢

Answer 1

要将数据发送回事件处理程序，您可以这样编写：

this.cellClick.emit({data : emitData, orderData: someData});

Answer 2

这就是从 Angular 11 开始的做法。我确信旧版本有些相似。此外，您可以通过阅读有关事件绑定的文档了解更多详细信息。

您绝对可以使用any即时声明的对象，但是此示例将展示如何使用强类型对象来执行此操作。

强类型对象，在应用程序中的某个位置声明：

export interface MyCustomObject {
    rowId: number;
    columnId: number;
    item: any;
}

子标记：

<div (click)="onCellClicked()"></div>

子组件的TS文件：

import { MyCustomObject } from './some-file.models';

@Component({
    selector: 'child-component',
    templateUrl: './child-component.component.html',
    styleUrls: ['./child-component.component.less']
})
export class ChildComponent implements OnInit {

    //whatever name you assign this Output variable,
    //is the event name you'll bind to on the parent markup
    @Output() cellClicked = new EventEmitter<MyCustomObject>();
    
    constructor() { }
    
    public onCellClicked(): void {
        const obj: MyCustomObject = {
            rowId: 5;
            columnId: 24;
            item: {
                foo: 'abc'
            };
        }
        
        this.cellClicked.emit(obj);
    }
}

使用子组件的父标记文件：

<!-- $event param will hold the passed value -->
<!-- also notice the use of (cellClicked) as defined by the childs Output variable -->
<child-component (cellClicked)="onChildCellClicked($event)"></child-component>

父 TS 文件：

import { MyCustomObject } from './some-file.models';

@Component({
    selector: 'parent-component',
    templateUrl: './parent-component.component.html',
    styleUrls: ['./parent-component.component.less']
})
export class ParentComponent implements OnInit {

    constructor() { }
    
    public onChildCellClicked(event: MyCustomObject): void {
        //do something on the parent with the data
        console.log('parent cell click event: ', event);
    }
}

Answer 3

如果我们遵循 Angular EventEmitter API：https ://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html

1. 更改 EventEmmiter 声明以使用：EventEmitter
2. 要发送数据，您必须使用 emmit 方法。

你的代码应该是这样的：

@Output() cellClick: EventEmitter<any> = new EventEmitter();
private _cellClicked(data: any){
      let emitData: any = {
        colId: data.column.colId,
        rowId: data.node.id,
        item:{}
      };
      if (emitWithdata){
          emitData.item=data;
          this.cellClick.emit(emitData); // Here  i need to send my data also, and it need to append to the value Data.item=data not just the Data object.
      } 
}