Angular4 - 如何从文档正文中删除由bootstrap注入的类？

Question

我正在使用第三方插件（ngx-modialog），它有一个插件架构，我正在使用它的Bootstrap插件。不幸的是，在您使用它来打开模态窗口之后有一个bug，它不会从body标签中删除一个类。

我可以在用户使用jQuery单击模式后自行删除它：

jQuery('body').removeClass('modal-open');

但我想知道如何在Angular中完成与上一行完全相同的操作？

我发现我可以这样做以获得身体的参考：

let body = document.getElementsByTagName('body');

我希望这可能会暴露 removeClass 方法。必须有一个简单的方法来做到这一点，所以我可以遵守Angular中 NO JQUERY的规则！;）

注意

我不打算使用 [ng-class] ，因为在这种情况下我无法绑定任何内容。

Answer 1

要在Angular 4中执行此操作，您可以使用Renderer2 class

使用方法：removeClass(el: any, name: string): void

  

Renderer2 是Angular提供的抽象操作，用于操作应用的元素，而无需直接触摸DOM

您可以像这样导入Renderer2：

import {Renderer2} from '@angular/core';

在组件的构造函数中注入它：

constructor(private renderer: Renderer2){
}

删除课程：

this.renderer.removeClass('body', 'modal-open');

Answer 2

正如评论中所指出的，'body'位于Angular域之外 - Angular将其组件层次结构加载到其中。

所以我只需要回到普通的javascript来执行此操作：

document.body.className = document.body.className.replace('modal-open','');

感谢this question。不需要jQuery。但是接受的答案是做到这一点的“有条不紊的方式”，这就是我所追求的。