Question

我无法检查元素属性的活动状态。我在下面尝试过，但是即使元素的属性处于活动状态也返回false-（.c-banner.active存在）

ngAfterViewInit() {
    const bannerElm = document.getElementById("banner");
    const isActive = bannerElm && bannerElm.getAttribute("class")
      .indexOf("c-banner.active") !== -1;  // returned false
}

Answer 1

为什么不使用 classList 和包含？

classList。contains();

 ngAfterViewInit() {
    const bannerElm = document.getElementById("banner");
    const isActive = bannerElm && bannerElm.classList.contains('c-banner') && bannerElm.classList.contains('active');
}

Answer 2

您可以使用classList.contains方法来检查元素是否具有活动类。

ngAfterViewInit() {
    setTimeout(() => {
        const isActive = bannerElm &&
                         bannerElm.classList.contains('c-banner') &&
                         bannerElm.classList.contains('active');
    }, 1000);
}

[UPDATED]将其包装在setTimeout（）中，它起作用了！万一其他人陷入了我以前遇到的组件初始化订单问题。

Answer 3

除了实际访问class属性值的最佳方法是什么以外，根据您的评论判断，问题似乎是异步的。为了避免使用骇人听闻的setTimeout解决方案，我建议应用一个变异观察者，并对属性的变化做出相应的反应。这是一种方法。

PS：编辑了答案，使其更适合您要实现的目标。最后，除了在防抖时间用完之前横幅状态已更改，主题立即发出并且与使用setTimeout < / p>

bannerIsActive$ = new BehaviorSubject<boolean>(false);

ngAfterViewInit() {
    const banner = document.getElementById('banner');

    const observer = new MutationObserver((mutations: MutationRecord[]) => {
        const mutation = mutations[0];
        const classList: DOMTokenList = mutation.target['classList'];
        this.bannerIsActive$.next(mutation.attributeName === 'class' && classList.contains('active'));
    });

    observer.observe(banner, {
        attributes: true
    });

    this.bannerIsActive$.pipe(
         debounce(isActive => timer(isActive ? 0 : 1000)),
         take(1)
    ).subscribe(isActive => {
       // do something with the banner state
    });
}

Answer 4

您应该使用ViewChild，而不是直接访问DOM。两者都可以工作，但这是严格的方法。

@ViewChild('banner') input; 
ngAfterViewInit() {
    var classAttributes= this.input.nativeElement.getAttribute('class');
    var result=classAttributes&&classAttributes('c-banner')
}

状态为（.active）的元素的getAttribute

4 个答案: