Angular组件输入参数传递至子div实现CSS样式控制

我来帮你搞定这个问题！你已经成功通过@Input传递了title参数，现在只需要用Angular的属性绑定语法，就能把titletype参数同步到HTML模板的div属性上，从而触发对应的CSS样式。

步骤1：在组件TS文件中定义titletype输入属性 #

首先确保你的组件类里已经声明了titletype这个@Input参数，和title一样：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'custom-input-component', // 替换成你实际的组件选择器
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.scss']
})
export class CustomInputComponent {
  @Input() title!: string;
  @Input() titletype!: string; // 新增这个输入属性
}

步骤2：在HTML模板中绑定titletype到div的自定义属性 #

因为titletype是你自定义的属性（不是HTML原生属性），所以需要用[attr.属性名]的语法来绑定，这样就能把TS里的参数值传递到div的属性上：

<ion-input placeholder='Label'> 
  <div class="label" [attr.titletype]="titletype"> {{title}} </div> 
</ion-input>

这里的[attr.titletype]会把titletype输入参数的值，渲染成div上的titletype属性，比如当你传递titletype="inborder"时，最终HTML会变成<div class="label" titletype="inborder">...</div>，正好匹配你的CSS选择器。

步骤3：使用组件时传递titletype参数 #

现在你可以在使用这个自定义组件的时候，像传递title一样传入titletype：

<!-- 使用inborder样式 -->
<custom-input-component title="用户名" titletype="inborder"></custom-input-component>

<!-- 使用corner样式 -->
<custom-input-component title="密码" titletype="corner"></custom-input-component>

验证CSS样式 #

你的现有CSS选择器是正确的，只要div上有对应的titletype属性，对应的样式就会自动生效：

.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; 
}

这样操作后，你就能根据传递的titletype参数，动态给div设置对应的属性，从而应用不同的CSS样式啦！

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