Angular父子组件传值异常：子组件接收数据显示undefined

问题出在HTML属性大小写不敏感导致的输入属性名称不匹配，具体修复方案如下：

方案1：修正父组件模板的绑定名称 #

HTML会自动将属性名转换为小写，需要把模板中的绑定名称改成和子组件@Input属性名匹配的格式，两种写法都支持：

驼峰格式（推荐） #

修改父组件模板代码：

<p>parent works!</p>
<app-enfant [valueChild]="variableParent" ></app-enfant>

短横线分隔格式 #

Angular会自动将短横线分隔的属性名映射为驼峰命名的组件属性：

<p>parent works!</p>
<app-enfant [value-child]="variableParent" ></app-enfant>

方案2：给子组件的@Input指定别名 #

如果不想修改父组件模板，可以在子组件的@Input装饰器中指定别名，匹配模板里的ValueChild名称：

修改子组件的TypeScript代码：

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-enfant',
  templateUrl: './enfant.component.html',
  styleUrls: ['./enfant.component.css']
})
export class EnfantComponent implements OnInit {
  @Input('ValueChild') ValueChild: any; // 添加别名匹配模板属性名
  constructor() { }

  ngOnInit(): void {
   console.log(this.ValueChild); // 修复后会正常输出父组件传递的值
  }
}

问题原因说明 #

HTML的属性名称是大小写不敏感的，当你在模板中写[ValueChild]时，浏览器会自动将其转换为小写的valuechild，而Angular默认会根据组件类中@Input装饰的属性名（驼峰式的ValueChild）去匹配传入的属性，两者名称不匹配，导致子组件无法接收到父组件传递的值，最终显示undefined。

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