Angular点击切换按钮类报错‘removeClass不是函数’的解决方法

为什么会报错“removeClass is not a function”？ #

你代码里的核心问题是：this.drawId = button.id 把按钮的ID字符串（比如"draw"）赋值给了变量，而不是按钮对应的DOM元素本身。removeClass()和addClass()是DOM元素（或jQuery包装后的元素）的方法，字符串类型根本没有这些方法，所以才会抛出这个错误。

修复现有DOM操作的方案 #

既然你是通过模板引用变量（#draw/#upload）把按钮实例传入方法的，直接存储这个DOM元素就行，不用取ID。然后用原生DOM的classList API来操作类：

修改后的.component.ts代码

uploadBtn: HTMLButtonElement | undefined; 
drawBtn: HTMLButtonElement | undefined; 
activeButton: string = '';

DrawSketch(button: HTMLButtonElement){
  this.drawBtn = button;
  console.log("DrawSketch called...", this.drawBtn.id);
  
  // 切换当前按钮的类
  this.drawBtn.classList.remove('bg-gradient-white');
  this.drawBtn.classList.add('btn-success');
  
  // 切换另一个按钮的类（判空避免首次点击报错）
  if(this.uploadBtn){
    this.uploadBtn.classList.remove('btn-success');
    this.uploadBtn.classList.add('bg-gradient-white');
  }
  
  this.activeButton = "Draw";
}

UploadSketch(button: HTMLButtonElement){
  this.uploadBtn = button;
  console.log("UploadSketch called...", this.uploadBtn.id);
  
  this.uploadBtn.classList.remove('bg-gradient-white');
  this.uploadBtn.classList.add('btn-success');
  
  if(this.drawBtn){
    this.drawBtn.classList.remove('btn-success');
    this.drawBtn.classList.add('bg-gradient-white');
  }
  
  this.activeButton = "Upload";
}

更优的Angular风格方案：用属性绑定控制类 #

Angular更推荐声明式编程，也就是通过组件状态来驱动UI变化，而不是直接操作DOM。这种方式代码更简洁，也更符合Angular的设计理念：

步骤1：修改组件类状态

// 用字面量类型定义激活状态，更严谨
activeTab: 'draw' | 'upload' = 'draw'; // 默认激活Draw按钮
activeButton: string = '';

DrawSketch(){
  this.activeTab = 'draw';
  this.activeButton = "Draw";
}

UploadSketch(){
  this.activeTab = 'upload';
  this.activeButton = "Upload";
}

步骤2：模板中用[class.xxx]绑定类

<div class="col" id="but"> 
  <button 
    id="draw" 
    class="btn" 
    [class.btn-success]="activeTab === 'draw'"
    [class.bg-gradient-white]="activeTab !== 'draw'"
    (click)="DrawSketch()">
    Draw Sketch
  </button> 
  <button 
    id="upload" 
    class="btn" 
    [class.btn-success]="activeTab === 'upload'"
    [class.bg-gradient-white]="activeTab !== 'upload'"
    (click)="UploadSketch()">
    Upload Sketch
  </button> 
</div> 
<div>{{activeButton}}</div>

或者用ngClass实现更紧凑的写法：

<button 
  id="draw" 
  class="btn" 
  [ngClass]="{
    'btn-success': activeTab === 'draw',
    'bg-gradient-white': activeTab !== 'draw'
  }"
  (click)="DrawSketch()">
  Draw Sketch
</button> 
<button 
  id="upload" 
  class="btn" 
  [ngClass]="{
    'btn-success': activeTab === 'upload',
    'bg-gradient-white': activeTab !== 'upload'
  }"
  (click)="UploadSketch()">
  Upload Sketch
</button>

为什么这个方案更好？ #

• 完全避免了直接操作DOM，减少了潜在的DOM操作错误
• 逻辑集中在组件状态上，UI渲染完全由状态驱动，代码更易维护
• 类型更安全，状态变化清晰可控

内容的提问来源于stack exchange，提问作者Jay Prakash Thakur