Angular调用自定义组件报错：无法绑定'selectedType'到'app-useraccount-type'属性

报错成因 #

这个报错的核心原因是Angular编译器无法识别app-useraccount-type组件的selectedType输入属性，常见触发场景如下：

1. 组件未正确注册到使用它的模块：你虽然在组件内部声明了@Input() selectedType，但如果组件没有被正确加入到对应模块的声明/导出列表中，Angular就无法识别该组件的自定义输入属性。
2. 跨模块使用时未导出共享组件：如果UseraccountTypeComponent是放在共享模块中维护的，仅在共享模块的declarations中声明是不够的，必须在exports数组中导出该组件，其他模块导入共享模块后才能正常使用组件的输入属性。

解决方案 #

第一步：确认模块注册配置 #

• 场景1：组件直接声明在AppModule中
  检查app.module.ts的@NgModule配置，确保UseraccountTypeComponent已经加入到declarations数组：

@NgModule({
  declarations: [
    // 其他组件...
    UseraccountTypeComponent
  ],
  // 其他配置...
})
export class AppModule { }

• 场景2：组件放在共享模块（如SharedModule）中
  首先检查共享模块的配置，确保同时完成声明和导出：

@NgModule({
  declarations: [
    UseraccountTypeComponent
  ],
  exports: [
    // 导出后其他模块导入共享模块才能使用该组件
    UseraccountTypeComponent
  ]
})
export class SharedModule { }

然后确认你使用该组件的业务模块已经导入了共享模块：

@NgModule({
  imports: [
    // 其他模块...
    SharedModule
  ]
})
export class 你的业务模块 { }

第二步：验证修复 #

完成上述配置后重启开发服务，报错即可消失。

额外优化建议 #

你的代码中存在两个非致命问题，可以同步优化避免后续报错：

1. 不要在响应式表单中同时使用formControlName和ngModel：Angular v6之后已经废弃了在响应式表单控件上叠加ngModel的用法，你可以直接通过FormControl来赋值，不需要双向绑定selectedType。
2. 避免覆盖输入属性：你在组件ngOnInit中直接把输入属性myForm覆盖成了controlContainer.control，会导致父组件传入的myForm失效，要么删除父组件的[formGroup]传值，要么删除ngOnInit中覆盖myForm的逻辑。

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