Question

有没有办法检查一个元素有一个类，例如在angular1

中

angular.element(myElement).hasClass('my-class');

如何在angular5

中实现相同目标

Answer 1

以下是如何执行此操作的示例：

import {Component, NgModule, ViewChild, ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div class="bar" #myDiv>Div with a class</div>
    </div>
  `,
})
export class App {
  @ViewChild('myDiv') myDiv: ElementRef;

  ngOnInit() {
    console.log('has class foo', this.myDiv.nativeElement.classList.contains('foo')) //false
    console.log('has class bar', this.myDiv.nativeElement.classList.contains('bar')) //true
  }
}

从代码中可以看出，您需要使用＃{name}注释需要引用的元素，然后在模板中使用ViewChild（）来引用它。在ngOnInit中，您可以访问ViewChild上的nativeElement，并使用基本的DOM查询，您可以查看该类是否存在。

Answer 2

您可以使用jQuery实现它。首先，您需要使用命令

安装jquery

npm install jquery — save

其次，转到Angular CLI项目文件夹根目录下的./angular-cli.json文件，找到脚本：[]属性，并包含jQuery的路径，如下所示

“scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ]

然后您可以在项目中导入jquery并使用它。

    import { Component, OnInit  } from '@angular/core';
    import * as $ from 'jquery';
    @Component({
      selector: 'selector',
      templateUrl: 'template URL'
    })
    export class AppComponent implements OnInit {    
      public ngOnInit()
      {
        $(document).ready(function(){
           $(myElement).hasClass('my-class');
        });
      }
    }

Check元素在angular5中有类

2 个答案: