Angular13中子组件自定义EventEmitter事件未触发原因排查

以下是你代码中存在的可直接导致事件无法触发的问题及对应修复方案：

• 核心问题：textarea双向绑定语法错误
  你的子组件模板中textarea的双向绑定写法存在语法错误，多余了一个左方括号，且把[(ngModel)]拆成了换行的非法格式：

  <!-- 错误写法 -->
  <textarea matInput rows="5" [ 
  (ngModel)]="contentvalue"></textarea>
  

  双向绑定的固定语法是[(ngModel)]，不能有额外字符、不能在符号中间插入换行，修复为：

  <!-- 正确写法 -->
  <textarea matInput rows="5" [(ngModel)]="contentvalue"></textarea>
  

  这个语法错误会直接触发Angular模板解析失败，导致整个组件的所有事件绑定、数据绑定全部失效，是事件无法触发的最主要原因。

• 缺失依赖导入问题
  你在模板中使用了[(ngModel)]双向绑定，必须在当前组件所属的NgModule（通常是AppModule）中导入FormsModule，否则会触发编译错误，组件功能无法正常运行，同时要确保子组件已经在模块的declarations数组中声明：

  // app.module.ts 修正示例
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms'; // 新增导入
  import { AppComponent } from './app.component';
  import { postcreatecomponent } from './posts/post-create.component'; // 导入你的子组件
  
  @NgModule({
    declarations: [
      AppComponent,
      postcreatecomponent // 必须声明子组件才能使用
    ],
    imports: [
      BrowserModule,
      FormsModule // 新增到导入数组
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 可选格式修正（避免潜在解析异常）
  子组件中EventEmitter初始化时不要把构造函数的括号拆到新行，同时类名建议符合Angular大驼峰命名规范，避免TS解析出现异常：

  // 修正后的声明写法
  @Output() posted: EventEmitter<Post> = new EventEmitter<Post>();
  

修复以上问题后，点击按钮即可正常触发自定义事件，父组件的onPostAdded方法会正常执行。

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