按Angular文档实现子父组件OutputEvent传递失败求助

我按照Angular官方文档实现子组件向父组件传递Output事件，输入功能正常，但输出事件出现问题。构建时报错：

error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.
35 (newItemevent)="paginatePage($event)"

将父组件方法参数改为Event类型后编译通过，但触发子组件generatePagination方法时无响应。

相关代码 #

子组件TS文件 #

export class PaginationComponent implements OnInit {
  @Input() totalProducts!:number;
  @Output() newItemEvent = new EventEmitter<string>();
  pageLimit:number=5;
  ngOnInit(): void {}

  generatePagination(pageNumber:number){
    this.newItemEvent.emit("here is the pageSize: " + this.pageLimit + " and the pageNumber " + pageNumber);
  }
}

父组件HTML #

<app-pagination *ngIf="totalProducts" 
[totalProducts]="totalProducts"
(newItemevent)="paginatePage($event)"
></app-pagination>

父组件TS文件 #

export class ParentComponent implements OnInit {
  constructor() { }

  paginatePage(value: string){
      console.log(value);
  }
}

解决方法 #

1. 修复事件名称大小写不匹配问题 #

Angular对@Output事件的绑定严格区分大小写：子组件定义的事件是newItemEvent（驼峰命名），但父组件模板中写的是(newItemevent)（末尾字母E小写），这会导致Angular无法识别正确的自定义事件，转而传递原生Event对象，引发类型错误。

修改父组件HTML中的事件绑定，严格匹配子组件的事件名称：

<app-pagination *ngIf="totalProducts" 
[totalProducts]="totalProducts"
(newItemEvent)="paginatePage($event)"
></app-pagination>

2. 确保子组件方法被正确触发 #

检查子组件模板中是否有调用generatePagination的交互逻辑，比如分页按钮的点击事件：

<!-- 子组件HTML示例：添加触发按钮 -->
<button (click)="generatePagination(1)">跳转至第1页</button>

如果没有触发逻辑，即使事件绑定正确，也不会执行父组件的paginatePage方法。

3. 保留正确的参数类型 #

子组件中EventEmitter<string>明确指定传递字符串类型，父组件paginatePage方法的string类型参数是正确的，无需修改为Event类型。

内容的提问来源于stack exchange，提问作者User69