Angular组件@Input布尔传参异常及ngOnInit赋值不生效问题

你遇到的是Angular输入传值的典型类型问题：

• 当你在模板里直接写showviewmore="true"/showviewmore="false"（不带方括号）时，Angular会把引号内的内容当做静态字符串处理，不会做类型转换，最终组件接收到的showviewmore是字符串类型的"true"或"false"，而不是布尔值。
• JavaScript规则里，非空字符串转布尔值永远为true，所以不管你传的是"true"还是"false"，*ngIf="showviewmore"的判断结果永远为真，div会一直显示。
• 只有你完全不传入showviewmore属性时，组件内该变量值为undefined，转布尔值为false，div才会隐藏，和你观察到的现象完全匹配。
• 你在ngOnInit里的if(!this.showviewmore)判断永远不触发，也是因为非空字符串取反结果永远为false，自然进不了分支。

二选一即可：

方法1：使用属性绑定语法传布尔值 #

给属性加上方括号，Angular会将引号内的内容作为JavaScript表达式解析，传入真正的布尔值：

<!-- 父组件Index.html -->
<!-- 传入布尔true -->
<abc-comp x="1" y="64" [showviewmore]="true"></abc-comp>
<!-- 传入布尔false -->
<abc-comp x="1" y="64" [showviewmore]="false"></abc-comp>

方法2：组件内部兼容字符串传值 #

如果不想修改父组件的写法，可以在组件内将输入属性改成setter形式，自动做类型转换，同时兼容字符串和布尔两种传参格式：

// abc-comp.ts
private _showviewmore = false;
@Input()
set showviewmore(val: boolean | string) {
  this._showviewmore = val === true || val === 'true';
}
get showviewmore(): boolean {
  return this._showviewmore;
}

修改后可以在ngOnInit中打印值和类型确认结果：

ngOnInit(): void {
  console.log(typeof this.showviewmore, this.showviewmore);
  // 修复完成后会输出 'boolean' 类型的true/false，而非'string'类型的"true"/"false"
  if(!this.showviewmore){
    // 传入false时可正常进入该分支
    this.showviewmore = newValue;
  }
}

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