从AngularJS迁移至Angular 2+：如何替代jQuery实现DOM类增删

Hey there! 刚从AngularJS转过来的时候，确实会对新的类操作方式有点懵，毕竟Angular 2+的API和老版本差别不小。下面我给你唠唠几种最常用的实现方式，按需选就行：

1. 模板驱动绑定（最推荐，类似AngularJS的ng-class但更灵活） #

这是Angular里最常用的方式，直接在模板里搞定，不用碰组件逻辑，清爽得很：

单个类的条件绑定 #

如果你只需要控制单个类的显示隐藏，用[class.类名]的语法就行，和AngularJS里的ng-class="{'active': isActive}"异曲同工：

<div [class.active]="isActive">我是一个动态类的元素</div>

当组件里的isActive为true时，active类会自动加上；为false时自动移除。

多个类的对象语法 #

要同时控制多个类？用对象语法就对了，和AngularJS的写法几乎一样：

<div [class]="{
  'active': isActive,
  'text-large': isBigText,
  'bg-gray': isDarkMode
}">多类控制的元素</div>

注意哦，要是类名有连字符（比如text-large），记得用引号包起来，不然会报错。

数组语法混合静态和动态类 #

如果需要同时加静态类和动态类，数组语法就很方便：

<div [class]="['base-container', isActive ? 'active' : '', isBigText ? 'text-large' : '']">
  混合类的元素
</div>

静态类直接写在数组里，动态类用三元表达式判断就行。

2. 组件类中用Renderer2操作（适合逻辑驱动的场景） #

要是你需要在组件的方法里动态操作类名（比如点击按钮后切换类），那Renderer2是最佳选择——它是Angular官方推荐的DOM操作工具，支持跨平台和服务端渲染，比直接操作原生DOM靠谱多了：

首先在组件里注入Renderer2和ElementRef（或者用@ViewChild获取具体元素）：

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

@Component({
  selector: 'app-my-component',
  template: '<div #targetElement>点击按钮切换我的类</div><button (click)="toggleClass()">切换类</button>'
})
export class MyComponent implements AfterViewInit {
  @ViewChild('targetElement') targetElement!: ElementRef<HTMLDivElement>;

  constructor(private renderer: Renderer2) {}

  toggleClass() {
    // 先判断元素有没有这个类，再决定添加还是移除
    const hasClass = this.targetElement.nativeElement.classList.contains('active');
    if (hasClass) {
      this.renderer.removeClass(this.targetElement.nativeElement, 'active');
    } else {
      this.renderer.addClass(this.targetElement.nativeElement, 'active');
    }
  }
}

这里用@ViewChild获取模板里的元素，然后通过Renderer2的addClass和removeClass方法操作类。

3. 直接操作原生DOM（不推荐，应急用） #

虽然Angular不推荐直接碰原生DOM，但有时候应急也可以用classList来操作，比如：

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

@Component({
  selector: 'app-my-component',
  template: '<div #myDiv>我是原生操作的元素</div>'
})
export class MyComponent {
  @ViewChild('myDiv') myDiv!: ElementRef<HTMLDivElement>;

  addClass() {
    this.myDiv.nativeElement.classList.add('active');
  }

  removeClass() {
    this.myDiv.nativeElement.classList.remove('active');
  }

  toggleClass() {
    this.myDiv.nativeElement.classList.toggle('active');
  }
}

⚠️ 注意：这种方式会绕过Angular的变更检测，在服务端渲染或者跨平台场景下可能出问题，非必要别用哈！

总结一下 #

• 优先用模板驱动绑定，简洁直观，符合Angular的声明式编程风格；
• 需要逻辑控制类的话，用Renderer2，遵循最佳实践；
• 直接操作原生DOM是最后选项，尽量避免。

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