Question

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

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 像example这样的指令或使用renderer2作为ts文件中onClick方法的一部分，如here所述。请注意，您必须使用renderer2而不是渲染器（不推荐使用）。

From angular document：

＆＃34; 避免直接使用DOM API 内置的浏览器DOM API不会自动保护您免受安全漏洞的侵害。例如，document，可通过ElementRef获得的节点以及许多第三方API包含不安全的方法。 避免直接与DOM交互，而是尽可能使用Angular模板。 ＆＃34;

Answer 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);
   }
 }

这对我来说很有用。

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

3 个答案: