点击按钮时如何修改Angular输入框的背景色？

当然可以在TypeScript文件中控制输入框的背景色，而且在Angular中更推荐用数据绑定的方式实现（而非直接操作DOM），既符合框架设计理念，也更易维护。下面提供两种常用实现方式：

方法1：内联样式绑定 #

直接在input元素上绑定背景色变量，通过TS逻辑动态修改变量值：

修改HTML代码 #

<h2 class="label-custom">Tag</h2>
<input class="input" 
       [readonly]="isReadOnly" 
       formControlName="tag" 
       [placeholder]="'Enter your tags' | transloco"
       [style.backgroundColor]="inputBgColor">
<button type="alter-button" class="alter-button" (click)="alter()">{{btnVal}}</button>

修改TypeScript代码 #

// 定义背景色变量，设置初始值
inputBgColor: string = 'white';
btnVal: string = '编辑'; // 初始按钮文本
isReadOnly: boolean = true;

alter() {
  // 切换只读状态
  this.isReadOnly = !this.isReadOnly;
  // 切换按钮文本
  this.btnVal = this.isReadOnly ? '编辑' : '保存';
  // 根据状态设置输入框背景色
  this.inputBgColor = this.isReadOnly ? '#f5f5f5' : 'white';
}

方法2：CSS类绑定（推荐复杂样式场景） #

如果需要设置的样式不止背景色，建议用类绑定的方式，实现样式与逻辑分离：

定义CSS类 #

.input-readonly {
  background-color: #f5f5f5;
  /* 可添加其他只读状态样式，比如光标样式、边框等 */
}
.input-editable {
  background-color: white;
}

修改HTML代码 #

<h2 class="label-custom">Tag</h2>
<input class="input" 
       [readonly]="isReadOnly" 
       formControlName="tag" 
       [placeholder]="'Enter your tags' | transloco"
       [ngClass]="isReadOnly ? 'input-readonly' : 'input-editable'">
<button type="alter-button" class="alter-button" (click)="alter()">{{btnVal}}</button>

TypeScript代码（无需额外修改背景色变量） #

btnVal: string = '编辑';
isReadOnly: boolean = true;

alter() {
  this.isReadOnly = !this.isReadOnly;
  this.btnVal = this.isReadOnly ? '编辑' : '保存';
}

注意事项 #

尽量避免直接通过document.querySelector或@ViewChild操作DOM修改样式——Angular的变更检测机制会管理视图状态，直接操作DOM可能导致视图与数据状态不一致，增加维护成本。

内容的提问来源于stack exchange，提问作者Abhi Rai