Angular4-如何从文档主体中删除由引导程序注入的类？

Question

I am using a 3rd party plugin (ngx-modialog) that has a plugin architecture and I am using its Bootstrap plugin. Unfortunately there is a bug that after you use it to open a modal window, it does not remove a class from the body tag.

I can remove it myself after the user clicks the modal using jQuery:

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

But I would like to know how can I do the exact same as the above line in Angular?

I found I could do this to get a ref to the body:

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

I was hoping that might expose a removeClass method. There must be a simple way to do this, so I can abide by the rule of NO JQUERY in Angular! ;)

NOTE

I am NOT looking to use [ng-class] as I have nothing I can bind to in this scenario.

Answer 1

To do that in Angular 4, you can use the Renderer2 class

Use the method: removeClass(el: any, name: string): void

Renderer2 is an abstraction provided by Angular to manipulate elements of your app without having to touch the DOM directly

You can import Renderer2 like this:

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

Inject it in the constructor of your component:

constructor(private renderer: Renderer2){
}

Remove a class:

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

Answer 2

As pointed out in the comments, the 'body' is outside of the domain of Angular - Angular loads its component hierarchy inside it.

So therefore I just need to fall back to regular javascript to do this:

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

Thanks to this question . No jQuery needed. But the accepted answer is the 'angular way' to do this, which is what I was after.