Angular中如何在*ngIf指令中校验组件传入的@Input数值

嘿，我能明白你遇到的困扰——之前的写法导致应用崩溃，是因为你误解了*ngIf指令的使用方式，咱们一步步来搞定它：

错误原因解析 #

*ngIf是Angular的结构型指令，它直接接受一个布尔类型的表达式，不需要用插值语法{{}}包裹。你写的*ngIf="{{height}}>0"会把{{height}}解析成字符串，最终变成类似"900">0这样的无效表达式，Angular无法正确解析，自然就会崩溃啦。

正确的写法 #

直接在*ngIf里使用组件类的height属性进行判断就行，不需要插值：

<!-- 基础写法 -->
<div *ngIf="height > 0" style="height: {{height}}px;"></div>

更规范的样式绑定方式 #

另外，Angular推荐用属性绑定来设置内联样式，这样不用手动拼接px，还能避免类型错误，写法更简洁：

<div *ngIf="height > 0" [style.height.px]="height"></div>

额外的健壮性优化 #

因为你的height默认值是0，当父组件没传值或者传0时，div会自动隐藏，符合需求。如果担心父组件可能传入非数字类型的值，可以给输入属性加个setter做校验：

// 子组件.ts文件
private _height = 0;

@Input() set height(value: number) {
  // 确保值是有效的正数，否则设为0
  this._height = typeof value === 'number' && value > 0 ? value : 0;
}

get height(): number {
  return this._height;
}

这样不管父组件传什么，子组件里的height都是安全的数值，避免意外的逻辑错误。

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