Angolare2 Rileva se elemento nella visualizzazione modello ha classe

Question

Utilizziamo bootstrap e talvolta aggiunge automaticamente classi agli elementi DOM. Qual è il modo migliore per collegarsi a questi elementi e rilevare quando una classe css di particalr viene aggiunta a un elemento figlio del modello componente?

dire che ho questa componente:

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) { } 
} 

e questa è una parte del mio modello di vista:

<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"> 

Come faccio a rilevare nel mio componente quando bootstrap aggiunge classe "aperta" a # patientDDL element ed esegue una funzione nel mio componente?

Grazie!

EDIT: ho modificato il mio componente a questo per la soluzione di Gunter ma io sto diventando un riferimento null quando non precedere i criteri con un controllo null)

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

    } 
} 

Anche lo statment console è connesso 4 volte durante il caricamento del modello, ma non viene mai più richiamato, anche dopo che la classe è stata aggiunta/rimossa più volte.

Questo è angolare2 rc1 non sicuro se ciò è rilevante.

Answer 1

Aggiungere una variabile modello per poter interrogare l'elemento.

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

query l'elemento

@ViewChild('patientDDL') patientDDL:ElementRef; 

Implementare ngDoCheck() per eseguire il controllo sia stato aggiunto alla classe quando rilevamento delle modifiche viene eseguito:

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

o su qualche evento specifico

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