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

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

将EventEmmiter声明更改为：EventEmitter
要发送数据，您必须使用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.
      } 
}

Answer 2

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

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

Answer 3

这是从 Angular 11 开始的做法。我确信旧版本有些相似。此外，您可以通过阅读documentation on Event Binding了解更多详情。

您绝对可以使用动态声明的 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);
    }
}

如何使用其值发出对象

3 个答案: