在Angular中使用jQuery添加或删除DOM类

Question

我正在将AngularJS应用迁移到Angular 2+。 为了在DOM中添加或删除CSS类，我应该如何在Angular 2+中实现以下代码：

link(scope, element, attrs) {
  let app = angular.element(document.querySelector('#app'))
  element.on('click', (event) => {
    if (app.hasClass('nav-collapsed-min')) {
      app.removeClass('nav-collapsed-min')
      this.collapseService.notify(false)
    } else {
      app.addClass('nav-collapsed-min')
      this.collapseService.notify(true)
    }
    return event.preventDefault()
  })
}

Answer 1

在html中使用ngClass。 例如：

<div [(ngClass)] = "{'your-class-name': condition}"></div>

Answer 2

为了改变对象的类，则可以使用角ngClass指令这样例子或使用renderer2如在TS文件一个onClick方法的一部分所说明这里 。 请注意，您必须使用renderer2而不是renderer（已弃用）。

从角度文件 ：

“ 避免直接使用DOM API 内置的浏览器DOM API不会自动保护您免受安全漏洞的影响。例如，文档，通过ElementRef可用的节点以及许多第三方API均包含不安全的方法。请避免与之直接交互DOM，并尽可能使用Angular模板。 ”

Answer 3

我最终使用了import {DOCUMENT} from '@angular/platform-browser';的import {DOCUMENT} from '@angular/platform-browser'; 操纵我的DOM并实现我的功能，如下所示：

 link(scope?, element?, attrs?) {
   const app = this.document.querySelector('#app');
   if (app.classList.contains('nav-collapsed-min')) {
      app.classList.remove('nav-collapsed-min');
      this.collapseService.notify(false);
   } else {
      app.classList.add('nav-collapsed-min');
      this.collapseService.notify(true);
   }
 }

所以这对我来说很棒。