如何用Angular Renderer2简洁增删类？能否两行代码替代if else？

嘿，这个问题我太有发言权了！完全可以用Renderer2写出超简洁的代码来替代一大堆if else的类操作，我来给你拆解两种最常见的场景，保证看完你就会用～

1. 单个类的条件增删（一行搞定） #

你之前可能写过这样冗余的代码：

if (isActive) {
  this.renderer.addClass(element.nativeElement, 'active');
} else {
  this.renderer.removeClass(element.nativeElement, 'active');
}

其实Renderer2的toggleClass方法自带第三个布尔参数，直接用一行就能替代上述逻辑：

this.renderer.toggleClass(element.nativeElement, 'active', isActive);

第三个参数的作用是强制控制类的状态：isActive为true就强制添加类，为false就强制移除类，完美省去if else的判断。

2. 多个互斥类的切换（两行搞定） #

比如tab栏、导航菜单这类场景，同一时间只有一个元素能拥有active类，你之前可能写了一堆嵌套的if else：

if (currentTab === 'tab1') {
  this.renderer.addClass(tab1El.nativeElement, 'active');
  this.renderer.removeClass(tab2El.nativeElement, 'active');
  this.renderer.removeClass(tab3El.nativeElement, 'active');
} else if (currentTab === 'tab2') {
  this.renderer.removeClass(tab1El.nativeElement, 'active');
  this.renderer.addClass(tab2El.nativeElement, 'active');
  this.renderer.removeClass(tab3El.nativeElement, 'active');
}
// 更多tab的话，else if要写到手软...

这时候用两行代码就能彻底解决：

// 第一行：批量移除所有目标元素的active类，统一重置状态
[this.tab1El, this.tab2El, this.tab3El].forEach(el => this.renderer.removeClass(el.nativeElement, 'active'));
// 第二行：给当前选中的元素单独添加active类
this.renderer.addClass(this[`${currentTab}El`].nativeElement, 'active');

核心思路是先把所有可能的元素"清零"，再单独给目标元素加类，不管你有多少个tab，这两行代码都能hold住，再也不用写一堆if else了。

完整示例代码 #

给你一个可直接复用的组件示例，方便你快速上手：

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'app-class-manage',
  template: `
    <button #tabBtn1 (click)="switchTab('tab1')">Tab 1</button>
    <button #tabBtn2 (click)="switchTab('tab2')">Tab 2</button>
    <button #tabBtn3 (click)="switchTab('tab3')">Tab 3</button>
    <p #statusText>当前选中标签：{{ activeTab }}</p>
  `,
  styles: [`
    .active {
      background: #2196F3;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
    }
    .highlight {
      color: #2196F3;
      font-weight: 600;
    }
  `]
})
export class ClassManageComponent {
  activeTab = 'tab1';

  @ViewChild('tabBtn1') tabBtn1!: ElementRef;
  @ViewChild('tabBtn2') tabBtn2!: ElementRef;
  @ViewChild('tabBtn3') tabBtn3!: ElementRef;
  @ViewChild('statusText') statusText!: ElementRef;

  constructor(private renderer: Renderer2) {}

  switchTab(tab: string) {
    this.activeTab = tab;

    // 处理互斥的tab active类（两行搞定）
    [this.tabBtn1, this.tabBtn2, this.tabBtn3].forEach(btn => {
      this.renderer.removeClass(btn.nativeElement, 'active');
    });
    this.renderer.addClass(this[`tabBtn${tab.slice(-1)}`].nativeElement, 'active');

    // 处理单个类的条件控制（一行搞定）
    const shouldHighlight = tab === 'tab2';
    this.renderer.toggleClass(this.statusText.nativeElement, 'highlight', shouldHighlight);
  }
}

你之前尝试没成功，大概率是没注意到toggleClass的第三个参数，或者没意识到可以批量处理元素来避免if else。试试上面的方法，绝对能帮你大幅简化代码～

内容的提问来源于stack exchange，提问作者Arthur Decker