Wir verwenden Bootstrap und fügen manchmal automatisch Klassen zu DOM-Elementen hinzu. Wie können Sie diese Elemente am besten anfügen und feststellen, wann einem untergeordneten Element einer Komponentenvorlage eine bestimmte CSS-Klasse hinzugefügt wurde?

Sag ich habe diese Komponente:

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

Und dies ist ein Teil meiner Ansichtsvorlage:

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

Wie erkenne ich in meiner Komponente, ob Bootstrap dem #patientDDL-Element eine "offene" Klasse hinzufügt und eine Funktion in meiner Komponente ausführt?

Vielen Dank

EDIT: Ich habe meine Komponente auf diese Gunter-Lösung umgestellt, erhalte aber einen Null-Verweis, wenn ich den Kriterien kein Null-Häkchen voranstelle.)

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

    }
}

Auch die Konsolenanweisung wird 4 Mal protokolliert, während die Vorlage geladen wird, aber dann wird sie nie wieder aufgerufen, selbst nachdem die Klasse mehrmals hinzugefügt / entfernt wurde.

Dies ist eckig2 rc1 nicht sicher, ob das relevant ist.