Angular父传子组件报错：'task_name'不是'app-single-task'的已知属性

嘿，这个报错我太熟了！Angular报这个错通常是几个常见原因，咱们一步步排查解决：

1. 检查@Input属性的命名匹配 #

Angular在模板里使用短横线/下划线分隔的属性名（比如task_name），默认会对应组件里驼峰命名的@Input属性，或者你需要显式指定别名来匹配模板里的命名。

给你两种可行的写法：

• 写法一：直接和模板属性名完全匹配

// single-task.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-single-task',
  templateUrl: './single-task.component.html'
})
export class SingleTaskComponent {
  @Input() task_name: string; // 和模板里的task_name完全对应
  @Input() to_dos: any[]; // 和模板里的to_dos完全对应
}

• 写法二：用驼峰命名+别名（更符合Angular编码风格）

// single-task.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-single-task',
  templateUrl: './single-task.component.html'
})
export class SingleTaskComponent {
  @Input('task_name') taskName: string; // 别名task_name对应模板里的属性
  @Input('to_dos') toDos: any[]; // 别名to_dos对应模板里的属性
}

2. 确保SingleTaskComponent已在模块中正确声明/导出 #

如果SingleTaskComponent是放在单独的功能模块（比如TaskModule）里，你必须：

• 在模块的declarations数组中注册该组件
• 同时在exports数组中导出它，这样使用它的父组件所在模块才能识别这个组件

// task.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SingleTaskComponent } from './single-task/single-task.component';
import { TaskComponent } from './task/task.component';

@NgModule({
  declarations: [
    TaskComponent,
    SingleTaskComponent // 声明组件
  ],
  exports: [
    SingleTaskComponent // 导出给其他模块使用
  ],
  imports: [
    CommonModule
  ]
})
export class TaskModule { }

如果组件是直接放在根模块AppModule里，只需把SingleTaskComponent添加到declarations数组即可。

3. 排查拼写错误 #

仔细核对模板里的属性名task_name、to_dos和组件里@Input的命名，有没有大小写错误、漏写下划线的情况——比如把task_name写成taskname，或者组件里写成taskName但没加别名，都会触发这个报错。

最后验证 #

修改完成后，建议重启一下Angular开发服务器（有时候缓存会导致修改不生效），再测试数据传递，应该就能正常展示了。

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