Angular中通过@Input传递组件输入参数时项目报错无法运行如何解决？

报错原因 #

你用的Angular版本默认开启了TypeScript严格属性初始化检查，要求类中声明的属性必须在声明时或者构造函数中完成初始化，你定义的@Input属性只声明了类型没有赋值，所以触发了类型报错。

可选用的解决方案 #

方案1：加非空断言（最常用，适合父组件一定会传参的场景） #

直接在属性名后加感叹号，告诉TypeScript你确定这两个属性一定会被外部传入值，不会为空：

@Input() text!: string;
@Input() color!: string;

方案2：设置默认初始值 #

给属性设置默认值，就算父组件不传参也不会出问题：

@Input() text: string = '';
@Input() color: string = '#fff';

方案3：设为可选属性 #

在类型前加问号，表示该属性是可选的，后续在组件内使用这两个属性时需要做好非空判断：

@Input() text?: string;
@Input() color?: string;

方案4：关闭严格检查（不推荐） #

如果不需要严格类型检查，可以修改项目根目录的tsconfig.json文件，在compilerOptions里添加配置：

"strictPropertyInitialization": false

删代码后仍报错的解决方法 #

不需要删除整个项目，这是Angular开发服务的缓存问题，按以下步骤操作即可：

• 停止正在运行的本地服务
• 删除项目根目录下的.angular缓存文件夹
• 重新执行ng serve启动服务即可

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