javascript - 将 Angular 组件输入参数传递给 CSS 的子 div

Question

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

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

标题有效，但我不知道标题类型

我的组件 html:

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

还有我的 CSS

.label[titletype=inborder] {
  padding: 4px;
  position: absolute;
  color: $textColor;
  margin-left: 13px;
  font-size: 12px;
  line-height: 16px;
  margin-top: -20px;
  background: white;
}

.label[titletype=corner] {
  padding: 4px;
  position: absolute;
  color: $textColor;
  float: right;
  font-size: 12px;
  line-height: 16px;
  right:5px;
  bottom: -24px;
}

Answer 1

你可以按类(class)做

.inborder{
  padding: 4px;
  position: absolute;
  color: $textColor;
  margin-left: 13px;
  font-size: 12px;
  line-height: 16px;
  margin-top: -20px;
  background: white;
}

.corner{
  padding: 4px;
  position: absolute;
  color: $textColor;
  float: right;
  font-size: 12px;
  line-height: 16px;
  right:5px;
  bottom: -24px;
}

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

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

这将根据 div 中的输入应用样式，如果它是

@Input() titletype:string;