Angular2 Определить, есть ли у элемента в представлении шаблона класс

Мы используем загрузчик, и иногда он автоматически добавляет классы к элементам DOM. Каков наилучший способ присоединения к этим элементам и обнаружения, когда класс particalr css добавляется в дочерний элемент шаблона компонента?

Скажем, у меня есть этот компонент:

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

Как я могу обнаружить в моем компоненте, когда bootstrap добавляет «открытый» класс к элементу #patientDDL и выполняет функцию в моем компоненте?

Спасибо!

РЕДАКТИРОВАТЬ: я изменил свой компонент для этого для решения Гюнтера, но я получаю нулевую ссылку, когда я не предшествую критерию с нулевой проверкой)

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 раза во время загрузки шаблона, но затем он никогда не вызывается снова, даже после того, как класс был добавлен / удален несколько раз.

Это angular2 rc1 не уверен, что это актуально.

Ответы на вопрос(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();
  }
} 
 Günter Zöchbauer24 июн. 2016 г., 19:48
Вы можете установить и удалить класс, но Angular2 не предоставляет ничего для чтения из элементов DOM.
 micronyks24 июн. 2016 г., 19:38
Я просто думал, ты не можешь сделать что-нибудь, используя @HostBinding?
 sebaferreras18 сент. 2017 г., 09:57
@ GünterZöchbauer - этоfoobar.nativeElement.classList.contains('open') хорошая практика или есть другой способ сделать это (используяrenderer или еще что)? Спасибо :)
 Günter Zöchbauer18 сент. 2017 г., 10:04
@sebaferrerasrenderer (или Angular в целом) не предоставляет ничего о чтении из DOM. Если вам нужно читать из DOM, прямой доступ к DOM является единственным способом. В чистом англоязычном приложении чтениеclassList никогда не должно быть необходимым, хотя Есть некоторые вещи, где прямого доступа DOM нельзя избежать, даже в чистых приложениях Angular.
 Günter Zöchbauer24 июн. 2016 г., 20:37
Он вызывается при обнаружении изменений. Если Bootstrap работает вне зоны Angular2s, Angular2 не получает уведомления. Может быть, вы можете слушатьclick и проверить наopen в обработчике событий. Я обновлю свой ответ.
 cobolstinks24 июн. 2016 г., 20:07
когда срабатывает ngDoCheck? Я спрашиваю, потому что он, кажется, не срабатывает при нажатии элемента и добавлении класса.

Ваш ответ на вопрос