Angular12组件变量绑定报错：已定义的dep变量提示不识别问题

问题核心原因 #

Angular 12 相对Angular 10 默认开启了更严格的类型检查与模板校验规则，旧教程的松散写法在新版严格规则下会触发报错，常见触发原因和解决方法如下：

解决方案 #

• 检查子组件输入属性声明 #

  接收dep参数的子组件必须使用@Input()装饰器声明该属性为外部输入属性，示例写法：

  import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-your-child-component',
    templateUrl: './your-child-component.component.html'
  })
  export class YourChildComponent {
    // 缺少@Input()装饰器会直接触发模板属性不识别报错
    @Input() dep: unknown;
  }
  

• 检查父组件变量初始化规则 #

  Angular 12 默认开启strictPropertyInitialization严格属性初始化校验，父组件中声明的dep变量如果没有初始值，也会触发模板识别报错，两种修正方式：

  // 方式1：声明时直接赋值初始值
  dep: string = '';
  
  // 方式2：添加非空断言运算符，确认后续会为该变量赋值，不会出现空值调用
  dep!: string;
  

• 排查误报情况 #

  如果执行ng serve命令后终端编译正常，仅VSCode编辑器报该错误，属于Angular Language Service插件版本与Angular 12不兼容导致的误报，升级该插件到最新版本即可解决。
  如需临时关闭严格校验降低开发门槛，可在项目根目录的tsconfig.json中调整配置：

  {
    "compilerOptions": {
      "strictPropertyInitialization": false
    }
  }
  

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