从子组件到父组件的Angular 5 EventEmitter发出未定义

Question

我正在尝试将一个string从子组件发送到他的父组件。

这是孩子：

//imports... 

    @Component({
    selector: 'child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.css'],
    providers: [ChildService]
    })

export class DataTableComponent implements OnInit {
    constructor(private http: HttpClient, private childService : ChildService) {}

    myMap = new Map<string, ISomeInterface>();
    currentSelection: string;

    @Output() sendDataEvent = new EventEmitter<string>();

    sendData() {
        console.log("sending this data:  " + this.myMap.get(this.currentSelection).name);
        this.sendDataEvent.emit(this.myMap.get(this.currentSelection).name);
    }
}

这是父母：

html->

<d-table (sendDataEvent)="receiveBusinessCycle(event)"></d-table>

打字稿->

//imports...

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
  providers: [ParentService]
})
export class MyParentComponent {
  totoName: string;

  constructor(private parentService : ParentService) {  }

  receiveBusinessCycle($event) {
    console.log($event); //shows in console 'undefined'
    console.log($event as string); 
    this.totoName = $event;
  }

}

问题是，当接收父组件中的数据时，我收到一个未定义的事件，这里是控制台日志：

sending this data:  201808
main.bundle.js:2328 undefined
main.bundle.js:2329 undefined

关于这个问题有什么想法吗？

Answer 1

您应该在$event这里使用：

<d-table (sendDataEvent)="receiveBusinessCycle($event)"></d-table>

我之前也遇到过类似的情况，显然，它似乎只能使用，$event因为它是抓住事件对象的保留关键字。

显然，Angular $event唯一提供了一个相应的DOM事件对象。这就是为什么不能将任何其他变量作为参数传递的原因。您可以在此处了解更多信息。

Angular在使用本机HTML元素时也认为这是一种可疑的做法，因为它打破了模板和组件之间关注点的分离。Angular建议改为使用模板变量。在此处了解更多信息。