Angular子组件@Input接收父组件传值，focus事件取不到值怎么解决

问题根因 #

• 父组件的属性绑定写法错误：当你使用[value]="abc"的语法时，Angular会默认将双引号内的abc解析为父组件的实例变量。如果父组件中没有定义名为abc的属性并赋值，实际传入子组件的value就是undefined，因此focus事件触发时打印结果不符合预期。
• 若项目未导入FormsModule，ngModel绑定会失效，也会导致值无法正常同步。

解决方案 #

根据你的使用场景选择对应修改方式即可：

场景1：传入固定静态字符串 #

直接去掉属性绑定的方括号，无需绑定语法即可直接传入字符串：

<!-- 父组件调用代码 -->
<app-ec-textbox value="abc"></app-ec-textbox>

场景2：需要保留方括号绑定语法 #

给字符串包裹单引号，告知Angular这是字符串字面量而非变量：

<!-- 父组件调用代码 -->
<app-ec-textbox [value]="'abc'"></app-ec-textbox>

场景3：abc是父组件定义的动态变量 #

确保父组件的TS文件中已经声明并初始化了该变量：

// 父组件TS代码
abc: string = 'abc';

原有调用写法[value]="abc"无需修改即可正常生效。

补充排查 #

如果修改传值写法后问题仍然存在，检查子组件所属的模块是否导入了FormsModule：

// 对应模块代码
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入
    FormsModule
  ]
})

修改完成后点击输入框触发focus事件，控制台即可正常打印传入的abc值。

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