输出和 EventEmtiter 不发送任何数据答案

【问题标题】：Output and EventEmtiter not sending any data输出和 EventEmtiter 不发送任何数据
【发布时间】：2021-08-30 10:05:15
【问题描述】：

我想使用 Output() 和 EventEmitter 方法将数据从我的子组件发送到我的父组件。但是，尽管发射器在子组件中被击中，但似乎没有发送任何内容？

我的子组件：

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

ngOnInit(): void {
    this.startUpload();
  }

startUpload() {
    // Unrelated Code Above ^^^^
    // Assign URL's to Array
    this.task.snapshotChanges().pipe(
      last(),
      switchMap(() => ref.getDownloadURL())
    ).subscribe(url => {
      this.urlStringEvent.emit(url);
    })
  }

在上面的 startUpload() 方法中，“url”响应是通过发送的，但是“this.urlStringEvent.emit(url);”似乎没有发生任何事情

在我的父组件（component.html）中：

<app-upload-task-training (showEvent)="receiveUrlString($event)"></app-upload-task-training>

component.ts:

receiveUrlString($event: any) {
    console.log($event);
  }

如上所示，$event 中没有记录任何内容，为什么会这样？

【问题讨论】：

您的父组件期望showEvent 触发，而不是urlStringEvent 。你能改变它并给我们更新吗？
这就是问题所在。抱歉，这是一个愚蠢的疏忽。

标签： javascript angular typescript output eventemitter

【解决方案1】：

您在html 中没有正确命名事件。像这样更改html 代码：

<app-upload-task-training (urlStringEvent)="receiveUrlString($event)"></app-upload-task-training>

【讨论】：

【解决方案2】：

您正在发出urlStringEvent，但在html 中您使用showEvent，它也不起作用，您可以像这样更改您的html

<app-upload-task-training (urlStringEvent)="receiveUrlString($event)"></app-upload-task-training>

或

改变这个

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

到这里

@Output('showEvent') urlStringEvent = new EventEmitter<string>();

【讨论】：