在下面的代码中，我想使用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>
如果要启用严格的模板类型检查，临时解决方案是将$event包装在$any()中。例：
$any($event)
它应该可以工作..在Angular 13x上测试
检查app.module.ts文件，并确保在声明中列出了容器中列出的组件。
@NgModule({
declarations : [
AppComponent,
//your child component
],
...})
要清除错误，
在 onlyNewlyAddItems 方法中，您期望字符串，但您正在从模板传递$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>
但是在组件内部侦听将不起作用。 因为这些 装饰器(输入和输出)用于从组件外部进行通信。
看看这个StackBlitz演示。 事件发射器用于将数据传递到父组件。 在此示例中，您可以看到当您从单独的子组件发出值时，您的代码可以正常工作。
正如其他答案已经指出的那样，最可能的原因是模块中的声明/导出/导入错误，因此请先检查一下。但是，如果您似乎无法解决问题，这里有一个方便的解决方法(不使用"任何"，您应该尽量避免使用)。
步骤 1 - 将数据作为子 ts 组件中的事件发出：
@Output() newItemValue = new EventEmitter<Event>();
//...
this.newItemValue.emit(result as unknown as Event);第 2 步 - 您的父 html 组件与您已有的组件相同：
<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>步骤3 - 您的父ts组件会将有效负载转换为必要的数据类型：
onlyNewlyAddedItems(event: Event) {
const val = event as unknown as string;
console.log(`onlyNewlyAddedItems: ${val}`);
}希望这有帮助！
我只是使用了错误的变量名。
例： 您的组件.ts
@Output() newItemValue = new EventEmitter<string>();
然后使用错误的名称：
<app-my-component (WrongName)="onNewItemValue($event)" ></app-my-component>
// 'WrongName' Parameter needs to change to newItemValue
onlyNewlyAddedItems(val: string) {
console.log("onlyNewlyAddedItems:" + val);
}
将方法参数数据类型从字符串更改为任意，如下所示。这种方法对我有用。
onlyNewlyAddedItems(val : any) {
console.log("onlyNewlyAddedItems:" + val);
}
您正在尝试在发出事件的同一组件中处理发出的事件。如果我从您的AppComponent中删除其他所有内容，它看起来像这样：
export class AppComponent {
@Output() newItemValue = new EventEmitter<string>();
# Trigger event to be emitted
addNewItem(val : string) {
this.newItemValue.emit(val);
}
# Attempt to handle event (in the same component?)
onlyNewlyAddedItems(val : string) {
console.log("onlyNewlyAddedItems:" + val);
}
}
<!-- You're emitting the event here -->
<button (click) = addNewItem(newItem.value)>add item</button>
<!-- and trying to capture the event here,
in the same component. This won't work -->
<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>
您的事件发射器和处理程序都在同一个组件中，我想这不是您想要的。事件是将数据传达给父组件的一种方式。
您的事件将从应用程序组件本身发出
您的事件不会在组件中发出。它将在组件上发出，即您将从应用程序组件本身捕获它：
<app-component(newItemValue)="onNewItem($event)"></app-component>
为什么您看到错误的事件类型：Event
您可以将任何编造的事件处理程序添加到任何 html 元素中，Angular 只会假设它在那里并将其投射到Event.所以你认为你的输入是错误的，但实际发生的事情是你为一个可能不存在(可能不存在)的事件添加了一个事件处理程序。
尝试
@Output("addNewItem") newItemValue = new EventEmitter<string>();
这为我解决了类似的问题。
您处于严格模式，只需将$event包装在$any中即可。