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

【问题标题】：Add or remove DOM classes with jQuery in Angular在 Angular 中使用 jQuery 添加或删除 DOM 类
【发布时间】：2018-02-19 14:56:23
【问题描述】：

我正在将 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()
  })
}

【问题讨论】：

不要在 Angular 2 中使用 querySelector 或 jQuery，这是不需要的，如果您以后想使用 SSR，它可能会破坏您的代码。看看这个帖子blog.angularindepth.com/…。无论如何，您只想切换类的大多数情况都可以使用 ngClass 指令来完成

标签： javascript jquery angularjs html angular

【解决方案1】：

在你的 html 中使用 ngClass。例如：

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

【讨论】：

【解决方案2】：

为了改变一个对象的类，你可以使用 angular ngClass 像 example 这样的指令或使用 renderer2 作为 ts 文件中 onClick 方法的一部分，如 here 所述。请注意，您必须使用 renderer2 而不是 renderer（已弃用）。

From angular document:

"避免直接使用 DOM API 内置浏览器 DOM API 不会自动保护您免受安全漏洞的影响。例如，document、ElementRef 可用的节点，以及许多第三方 API 都包含不安全的方法。 避免直接与 DOM 交互，而是尽可能使用 Angular 模板。"

【讨论】：

【解决方案3】：

我终于使用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);
   }
 }

所以这对我很有用。

【讨论】：