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

Question

在下面的代码中，我想使用 来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.
    

请让我知道如何onlyNewlyAddedItems通过执行该方法EventEmitter。

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);
  }
}

应用程序组件.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>

Answer 1

如果您想启用严格的模板类型检查，临时解决方案是将 $event 包装在$any()中。例子：

$任何($事件)

它应该可以工作..在 Angular 13x 上测试过

Answer 2

我只是使用了错误的变量名。

示例：您的 component.ts

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

然后使用错误的名称：

<app-my-component (WrongName)="onNewItemValue($event)" ></app-my-component> 
// 'WrongName' Parameter needs to change to newItemValue 

Answer 3

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

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

Answer 4

要清除错误，

在 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>

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