कोणीय 2 पता लगाएं कि टेम्पलेट दृश्य में तत्व वर्ग

Question

हम बूटस्ट्रैप का उपयोग कर रहे हैं, और कभी-कभी यह स्वचालित रूप से कक्षाओं को DOM तत्वों में जोड़ता है। इन तत्वों से जुड़ने का सबसे अच्छा तरीका क्या है और यह पता लगाने के लिए कि एक घटक टेम्पलेट बाल तत्व में एक आंशिक सीएसएस क्लास जोड़ा गया है?

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { HeaderService } from './header.service'; 

@Component({ 
    selector: 'header-comp', 
    templateUrl: './Home/RenderLayoutHeader' 
}) 

export class HeaderLayoutComponent { 
    constructor(private _headerService: HeaderService) { } 
} 

और यह मेरे विचार टेम्पलेट के एक हिस्से को है:

<header-comp>  
<li class="nav-header-icon-list-item"> 
         <div class="overlay-dropdown dropdown" id="patientDDL"> 
          <button class="btn btn-default dropdown-toggle session-menu-container" type="button" id="session-dropdown-menu" data-toggle="dropdown" data-backdrop="true" data-dismiss="modal" aria-haspopup="true" aria-expanded="false"> 
           <img data-initials="ER" src="https://lorempixel.com/40/40/abstract/" class="img-circle session-user-profile-img"> 

मैं कैसे मेरी घटक में पता नहीं लगा पाते हैं जब बूटस्ट्रैप # करने के लिए "खुला" वर्ग कहते हैं

मैं इस घटक है कहो patientDDL तत्व और मेरे घटक में एक फ़ंक्शन निष्पादित करें?

धन्यवाद!

संपादित करें: मैं Gunter के समाधान के अनुसार इस के लिए मेरे घटक संशोधित लेकिन जब मैं) एक अशक्त चेक के साथ मापदंड

import { Component, ViewChild, ElementRef, DoCheck } from '@angular/core'; 
import { HeaderService } from './header.service'; 

@Component({ 
    selector: 'header-comp', 
    templateUrl: './Home/RenderLayoutHeader' 
}) 

export class HeaderLayoutComponent implements DoCheck { 

    @ViewChild('patientDDL') patientDropDownList: ElementRef; 

    constructor(private _headerService: HeaderService) { } 

    ngDoCheck() { 
     console.log('ngDoCheck called'); 
     if (this.patientDropDownList && this.patientDropDownList.nativeElement.classList.contains('open')) { 
      this._headerService.setPatientDDLOpen(true); 
     } else { 
      this._headerService.setPatientDDLOpen(false); 
     } 

    } 
} 

इसके अलावा सांत्वना बयान लॉग होता है पूर्व में होना नहीं है मैं एक अशक्त संदर्भ हो रही है 4 बार टेम्पलेट लोड होने पर, लेकिन कक्षा को कई बार जोड़ा/हटा दिए जाने के बाद भी इसे फिर से नहीं बुलाया जाता है।

यह कोणीय 2 आरसी 1 सुनिश्चित नहीं है कि यह प्रासंगिक है या नहीं।

Answer 1

तत्व को क्वेरी करने में सक्षम होने के लिए एक टेम्पलेट चर जोड़ें।

<div #patientDDL class="overlay-dropdown dropdown" id="patientDDL"> 

क्वेरी तत्व

@ViewChild('patientDDL') patientDDL:ElementRef; 

जांच चलाने के लिए है कि क्या वर्ग जोड़ दिया गया लागू ngDoCheck() जब परिवर्तन का पता लगाने चलाता है:

ngDoCheck() { 
    if(patientDDL.nativeElement.classList.contains('open')) { 
    this.doSomething(); 
    } 
} 

या कुछ विशिष्ट घटना पर

@HostListener('click', ['$event']) 
clickHandler(event) { 
    if(patientDDL.nativeElement.classList.contains('open')) { 
    this.doSomething(); 
    } 
}