Question

我有一个组件，根据一个名为＆＃39; isVisible＆＃39;的变量，打开一个模态。是对还是错。一旦模态可见，我想在＆＃39; body＆＃39;中添加一个类。该页面的标签，一旦关闭，我想将该课程从＆＃39; body＆＃39;标签

以下是我的代码片段以及我尝试过的内容。

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

Answer 1

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

你可以使用javascript。如果我理解正确，你想改变身体标签的类。所以页面的正文。 <body></body>

How do I toggle an element's class in pure JavaScript?

和getElementsByTagName()或是你的查询选择器，我个人使用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中的Component之外的特定dom中添加一个类

1 个答案: