Question

我们正在使用bootstrap，有时它会自动将类添加到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将“open”类添加到#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次，但是即使在多次添加/删除类之后，也不会再次调用它。

这是angular2 rc1，不确定是否相关。

Answer 1

添加模板变量以便能够查询元素。

dxg:TableView.AutoWidth = false

查询元素

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

实施@ViewChild('patientDDL') patientDDL:ElementRef;以检查运行更改检测时是否添加了类：

ngDoCheck()

或某些特定事件

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

Angular2检测模板视图中的元素是否具有类

1 个答案: