在下面的代码中，我想使用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。
应用程序组件.组件.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>
6条答案
按热度按时间u5i3ibmn1#
如果您想启用严格的模板类型检查，临时的解决方案是将$event Package 在**$any（）**中。例如：
$任何（$个事件）
它应该工作..在Angular 13 x上测试
93ze6v8z2#
检查您的app.module.ts文件，确保声明中的容器中列出了组件。
wecizke33#
要清 debugging 误，
在onlyNewlyAddedItems方法中，您需要的是string，但您传递的是来自模板的$event。请尝试使用以下代码。
但在组件内部侦听将不起作用，因为这些装饰器（输入和输出）用于从组件外部进行通信。
vi4fp9gy4#
请看这个StackBlitz演示。事件发射器是用来向父组件传递数据的。在这个例子中，你可以看到当你从一个单独的子组件中发射值时，你的代码是有效的。
j9per5c45#
您正在尝试在发出事件的同一组件中处理发出的事件。如果我从
AppComponent中删除所有其他内容，它将如下所示：第一个
你的事件发射器和处理器都在同一个组件中，我想这不是你想要的。事件是一种向父组件传递数据的方式。
您的事件将从AppComponent本身发出
您的事件不会在组件内发出。它将在组件上发出，即您将从应用程序组件本身捕获它：
为什么会看到错误的事件类型：
Event你可以在任何html元素中添加任意的事件处理器，Angular会假设它存在并将其转换为
Event。所以你认为你的输入是错误的，但实际上你为一个可能不存在的事件添加了一个事件处理器。rhfm7lfc6#
将方法参数的数据类型从string更改为any，如下所示。此方法对我有效。