Angular5中如何检查元素是否包含指定类？（附Angular1示例）

嘿，在Angular 5里完全不用再依赖AngularJS的angular.element啦，有两种更贴合Angular生态的实用方法，我给你详细说说：

方法一：直接使用原生DOM的classList API #

Angular 5中获取到的元素引用本质就是原生HTMLElement，所以可以直接调用原生的classList.contains()方法，这是最直接高效的方式。

举个组件内的示例：

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

@Component({
  selector: 'app-class-check',
  template: '<div #targetElement class="default-class">测试元素</div>'
})
export class ClassCheckComponent implements AfterViewInit {
  // 通过@ViewChild获取模板中的元素引用
  @ViewChild('targetElement') targetElement: ElementRef;

  ngAfterViewInit() {
    // 检查是否包含目标类
    const hasTargetClass = this.targetElement.nativeElement.classList.contains('my-class');
    console.log(`元素是否包含my-class类：${hasTargetClass}`);
  }
}

方法二：使用Angular官方推荐的Renderer2服务 #

如果你想遵循Angular的最佳实践（尤其是在需要跨平台支持或更易测试的场景下），可以用Renderer2提供的hasClass()方法，它是Angular封装的安全DOM操作工具。

示例代码：

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

@Component({
  selector: 'app-class-check',
  template: '<div #targetElement class="default-class">测试元素</div>'
})
export class ClassCheckComponent implements AfterViewInit {
  @ViewChild('targetElement') targetElement: ElementRef;

  // 注入Renderer2服务
  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    const hasTargetClass = this.renderer.hasClass(
      this.targetElement.nativeElement,
      'my-class'
    );
    console.log(`元素是否包含my-class类：${hasTargetClass}`);
  }
}

补充说明 #

不管是通过document.querySelector获取的外部元素，还是组件内的模板元素，只要拿到的是原生HTMLElement实例，都可以用上面两种方法。Angular 5+已经完全脱离了AngularJS的jqLite封装，原生API和Renderer2是更合适的选择哦。

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