Angular子组件向父组件传值时无法读取'target'属性问题

咱们先把核心问题拆解清楚——你这里的误解在于混淆了原生DOM事件对象和自定义组件事件的传递数据（payload），这正是报错的根源。

为什么会报错？ #

先看你的代码逻辑：

1. 子组件中，你在onkeyUp方法里调用了this.childevent.emit(value)，这里的value是直接从inputbox.value拿到的输入框文本（一个字符串）。也就是说，你通过自定义事件childevent发射出去的内容就是这个字符串，不是原生的keyup事件对象（只有原生事件对象才会有target.value结构）。
2. 父组件里你把Cdata赋值为$event，此时Cdata存储的就是子组件传过来的字符串，而不是带target属性的事件对象。所以你试图访问Cdata.target.value，就相当于在一个字符串上找不存在的target属性，自然会抛出“Cannot read property 'target' of undefined”的错误；即使使用可选链Cdata?.target.value，因为Cdata本身是字符串（不是null/undefined），但它的target属性不存在，还是会报错。

修正方案（两种可选） #

方案1：直接使用传递的输入值（推荐，符合你当前的代码逻辑）

既然子组件已经直接传递了输入框的文本值，父组件不需要再去访问target.value，直接用{{Cdata}}就能显示内容：

<label>Value of Child Component: </label> {{Cdata}} 
<app-student (childevent)='Cdata=$event'></app-student>

方案2：传递原生DOM事件对象（如果确实需要事件的完整信息）

如果你需要拿到原生keyup事件的全部信息（比如按键类型、事件源等），可以修改子组件的代码，发射原生事件对象：

1. 子组件模板修改为传递原生事件：

<input type='text' (keyup)='onkeyUp($event)'>

2. 子组件TS调整事件处理函数：

onkeyUp(event: KeyboardEvent) {
  // 发射原生事件对象
  this.childevent.emit(event);
}

3. 父组件中需要对事件目标做类型断言（避免TypeScript类型报错），再访问value：

<label>Value of Child Component: </label> {{(Cdata?.target as HTMLInputElement)?.value}} 
<app-student (childevent)='Cdata=$event'></app-student>

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