在Angular2的組件外添加一個類到一個特定的dom中

我有一個組件打開了一個模塊，它基於如果一個名爲'isVisible'的變量是True或False。一旦模態可見，我想添加一個類到頁面的「body」標記中，一旦它被關閉，我想從「body」標記中移除該類。在Angular2的組件外添加一個類到一個特定的dom中

下面是我的代碼片段和我試過的。

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

來源

2016-09-12 user875139

告訴我，如果我的回答是，你在等待什麼。這是一個奇怪的問題，因爲您已經具備了自己找到所需的知識。或者，也許我的回答顯然是錯誤的，在這種情況下，我會自己學習一些東西。 – Ced

有人糾正我，如果這是錯誤的或反模式在ng。

您可以使用JavaScript。如果我理解正確，你想改變body標籤的類。所以頁面的主體。 <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; 
    }

測試，工作

來源

2016-09-12 16:09:29 Ced

乾杯隊友。我一直在想這個，只是試圖通過angular2來解決。這使得直接和簡單的答案 – user875139

@ user875139是的，我很高興這是你問的，我認爲這是一個非常奇怪的問題，因爲你已經有了所有的知識。有時候就是這麼簡單：p – Ced

是的，有時候人們只是忘記了基本知識，特別是在拿起新東西的時候。（Angular2在我的情況下是lol） – user875139

在Angular2的組件外添加一個類到一個特定的dom中

回答

相關問題