Javascript 将类添加到Angular2中组件外部的特定dom中

我有一个组件，它根据名为“isVisible”的变量的值是真是假打开一个模态。一旦模态可见，我想在页面的“body”标记中添加一个类，一旦它关闭，我想从“body”标记中删除该类

下面是我的代码片段和我尝试过的内容

import {Component, ElementRef} from '@angular/core';

@Component({
    selector: 'modal',
    template: '<div class="modal_div">
        <div (click)="closeCard()"></div>
        <div class="modal_body">blah</div>
    </div>'
})

export class DailogComponent{
    isVisible: boolean;
    constructor(public element: ElementRef){
        this.isVisible = false;
    }

    OpenModal(){
        this.isVisible = true;
        //add css class to body here which is where I am lost 
       console.log(this.element.nativeElement.parentNode.querySelector('body'));
    }

    closeModal(){
        this.isVisible = false;
        //remove css class to body here which is where I am lost 
       console.log(this.element.nativeElement.parentNode.querySelector('body'));
    }
}

从'@angular/core'导入{Component，ElementRef}；
@组成部分({
选择器：“模态”，
模板：'
废话
'
})
导出类DailogComponent{
isVisible：布尔；
构造函数（公共元素：ElementRef）{
this.isVisible=false；
}
OpenModal（）{
this.isVisible=true；
//将css类添加到这里的body，这就是我丢失的地方
log（this.element.nativeElement.parentNode.querySelector（'body'）；
}
closeModal（）{
this.isVisible=false；
//删除css类到这里的主体，这是我丢失的地方
log（this.element.nativeElement.parentNode.querySelector（'body'）；
}
}

如果这是错误的或ng中的反模式，请有人纠正我

您可以使用javascript来实现这一点。如果我理解正确，您希望更改body标记的类。这就是页面的主体<代码>

或者是的，查询选择器就像你们做的一样，我个人使用getElementsByTagName并没有什么好的理由，只是我已经习惯了

  //don't capitalize function names.
  toggleBodyClass(){
    this.toggleClass(document.getElementsByTagName('body')[0], 'myclass');
  }
  //this function is taken from the Stackoverflow thread posted above.
  toggleClass(ele, class1) {
    let classes = ele.className;
    let regex = new RegExp('\\b' + class1 + '\\b');
    let hasOne = classes.match(regex);
    class1 = class1.replace(/\s+/g, '');
    if (hasOne)
      ele.className = classes.replace(regex, '');
    else
      ele.className = classes + class1;
  }

---

测试，有效

告诉我我的答案是否是您所期待的。这是一个奇怪的问题，因为你已经掌握了自己找到它所必需的知识。或者也许我的答案完全错了，在这种情况下，我会自己学到一些东西。干杯，伙计。我想得太多了，只是想通过angular2解决这个问题。这使得一个直接和容易answer@user875139是的，我很高兴这是你问的问题，我认为这是一个非常奇怪的问题，因为你已经有了这么做的所有知识。有时候就这么简单：是啊，有时候人们会忘记基本的东西，尤其是在学习新东西的时候。（在我的例子中是Angular2 lol）