Javascript 将角度组件输入参数传递给CSS的子div

我想根据组件内div上的输入设置CSS

我使用@Input将参数传递给我的自定义组件，我希望将其中一个参数传递给html，如下所示：

标题行得通，但标题类型我不知道

我的组件html：

<ion-input placeholder='Label'>
  <div class=label titletype= **the parameter from my .ts file**>
      {{title}}
  </div>
</ion-input>

---

您可以使用以下工具获得更好的开发体验：

---

您可以使用以下工具获得更好的开发体验：

---

你可以上课做

.inorder{
填充：4px；
位置：绝对位置；
颜色：$textColor；
左边距：13px；
字体大小：12px；
线高：16px；
利润上限：-20px；
背景：白色；
}
.拐角处{
填充：4px；
位置：绝对位置；
颜色：$textColor；
浮动：对；
字体大小：12px；
线高：16px；
右：5px；
底部：-24px；
}

然后根据条件，您可以在div中设置标题如下的类

<ion-input placeholder='Label'>
  <div class="label" [ngClass]="{'inborder': titletype=='inborder', 'corner': titletype=='corner'}">
      {{title}}
  </div>
</ion-input>

---

你可以上课做

.inorder{
填充：4px；
位置：绝对位置；
颜色：$textColor；
左边距：13px；
字体大小：12px；
线高：16px；
利润上限：-20px；
背景：白色；
}
.拐角处{
填充：4px；
位置：绝对位置；
颜色：$textColor；
浮动：对；
字体大小：12px；
线高：16px；
右：5px；
底部：-24px；
}

然后根据条件，您可以在div中设置标题如下的类

<ion-input placeholder='Label'>
  <div class="label" [ngClass]="{'inborder': titletype=='inborder', 'corner': titletype=='corner'}">
      {{title}}
  </div>
</ion-input>

假设自定义组件的@Input（）属性是： @Input（）myProp:string

因此，在html中可以使用插值

<ion-input placeholder='Label'>
  <div class=label titletype={{ this.myProp }}>
      {{title}}
  </div>
</ion-input>

{{title}}

此外，如果@Input是对象而不是字符串，则可以计算其属性以确定应显示的标题类型

例如：

@Input（）myObj:CustomClass

html

<ion-input placeholder='Label'>
  <div class=label titletype={{ this.myObj.myProp === condition ? 'inborder' : 'corner'  }}>
      {{title}}
  </div>
</ion-input>

{{title}}

假设自定义组件的@Input（）属性是： @Input（）myProp:string

因此，在html中可以使用插值

<ion-input placeholder='Label'>
  <div class=label titletype={{ this.myProp }}>
      {{title}}
  </div>
</ion-input>

{{title}}

此外，如果@Input是对象而不是字符串，则可以计算其属性以确定应显示的标题类型

例如：

@Input（）myObj:CustomClass

html

<ion-input placeholder='Label'>
  <div class=label titletype={{ this.myObj.myProp === condition ? 'inborder' : 'corner'  }}>
      {{title}}
  </div>
</ion-input>

{{title}}

这个编译

这个编译
正是我想要的吗。谢谢你，这正是我想要的。谢谢
<ion-input placeholder='Label'>
  <div class=label titletype={{ this.myObj.myProp === condition ? 'inborder' : 'corner'  }}>
      {{title}}
  </div>
</ion-input>