“事件”类型的参数不可分配给“字符串”类型的参数答案

【问题标题】：Argument of type 'Event' is not assignable to parameter of type 'string'“事件”类型的参数不可分配给“字符串”类型的参数
【发布时间】：2021-06-30 10:50:38
【问题描述】：

在下面的代码中，我想使用EventEmitter 来调用方法onlyNewAddedItems。

我定义了EventEmitter 实例和发出事件的方法，如下所示：

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

  addNewItem(val : string) {
    this.newItemValue.emit(val);
    console.log("add new item:" + val);
    this.items.push(val);
  }

要绑定到第三个事件，我执行了以下操作：

<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>

但是当我编译代码时，我收到以下错误

Error: src/app/app.component.html:4:42 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.

4 <h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>                                        
  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

请告诉我如何通过EventEmitter 执行方法onlyNewlyAddedItems。

AppComponent.component.ts：

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'InputOutputBindings';
  currentItem = 'TV';
  items = ['item1', 'item2', 'item3', 'item4'];

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

  addNewItem(val : string) {
    this.newItemValue.emit(val);
    console.log("add new item:" + val);
    this.items.push(val);
  }

  onlyNewlyAddedItems(val : string) {
    console.log("onlyNewlyAddedItems:" + val);
  }
}

app.component.html：

<h1 #test = customdirective appItemDetails [item]="currentItem">{{currentItem}}  item</h1>
<label>Add an item: <input #newItem></label>
<button (click) = addNewItem(newItem.value)>add new item</button>
<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>

【问题讨论】：

当您将接收函数/变量放在父模板中的错误子标签上时也会发生此错误 - 而不是正在发射的子标签。

标签： angular typescript angular-event-emitter

【解决方案1】：

要清除错误，

在 onlyNewlyAddedItems 方法中，您期望的是字符串，但您从模板中传递了 $event。请尝试以下代码。

<h1 #test = customdirective appItemDetails [item]="currentItem">{{currentItem}}  item</h1>
<label>Add an item: <input #newItem></label>
<button (click) = addNewItem(newItem.value)>add new item</button>
<h1 (newItemValue) = onlyNewlyAddedItems(newItem.value)></h1>

但是在组件内部监听是行不通的。由于这些装饰器（输入和输出）用于与组件外部通信。

【讨论】：

正在组件内部列出 $event 不工作的原因！！无论如何有 $event 工作吗？
里面没有监听，其实是类型不匹配的问题。请让我知道用例，为什么当我们拥有当前的新项目和相应的句柄时，我们需要一个单独的事件发射器来记录新项目。
欢迎您！ @LetsamrIt

【解决方案2】：

查看此StackBlitz 演示。事件发射器用于将数据传递给父组件。在示例中，您可以看到当您从单独的子组件发出值时，您的代码可以正常工作。

【讨论】：

【解决方案3】：

检查您的 app.module.ts 文件并确保您的容器在声明中列出了组件。

@NgModule({
   declarations : [
   AppComponent, 
   //your child component
],
...})

【讨论】：

这在我处理 ngx-image-cropper 时为我解决了这个问题，并且它的事件返回其模块中定义的复杂类型。

【解决方案4】：

onlyNewlyAddedItems(val: string) {
console.log("onlyNewlyAddedItems:" + val);
}

将方法参数数据类型从 string 更改为 any，如下所示。这种方法对我有用。

onlyNewlyAddedItems(val : any) {
console.log("onlyNewlyAddedItems:" + val);
}

【讨论】：