Angular2 Wykryj, czy element w widoku szablonu ma klasę

Question

Używamy bootstrap, a czasami automatycznie dodaje klasy do elementów DOM. Jaki jest najlepszy sposób dołączenia do tych elementów i wykrycia, kiedy particalr klasa css jest dodawana do elementu potomnego szablonu elementu?

powiedzieć, że ten składnik:

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

I to jest część mojego widoku szablonu:

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

jaki sposób wykryć w moim komponentu kiedy bootstrap dodaje klasy "otwarty" do # element patientDDL i wykonać funkcję w moim komponencie?

Dzięki!

EDIT: zmodyfikowałem mój składnik to za rozwiązanie Gunter, ale ja dostaję pustą referencję kiedy nie poprzedzać kryteria z pustym Check)

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

    } 
} 

Również statment konsola jest zalogowany 4 razy, gdy szablon ładuje się, ale potem nigdy nie jest wywoływany ponownie, nawet po tym, jak klasa została dodana/usunięta wiele razy.

To jest kątowe2 rc1 nie jest pewne, czy jest to istotne.

Answer 1

Dodaj zmienną szablonu, aby móc wysłać zapytanie do elementu.

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

Query element

@ViewChild('patientDDL') patientDDL:ElementRef; 

Wdrożenie ngDoCheck() uruchomić sprawdzanie, czy klasa została dodana podczas wykrywania zmian zjazdowe:

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

lub na jakimś konkretnym wydarzeniem

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