`querySelectorAll` - returns 使用数据选择器查询时的空值

Question

在我的 angular 指令中，我试图通过 data-xxx 值 select 元素。但得到 0 作为长度。

谁能帮助我理解这个问题？

directive.ts:

import {
  Directive,
  OnInit,
  HostListener,
  ElementRef,
  AfterContentChecked,
} from '@angular/core';

@Directive({
  selector: '[autoFocus]',
})
export class AutoFocusDirective implements AfterContentChecked {
  @HostListener('document:keydown', ['$event']) public onKeyUp = ($event) => {
    console.log($event.target);
  };

  constructor(private el: ElementRef<HTMLElement>) {}

  ngAfterContentChecked() {
    this.onFindingTree(this.el.nativeElement);
  }

  onFindingTree(parent) {
    const focusable = parent.querySelectorAll(`[focus=true]`);
    console.log(focusable.length);
  }
}

html:

<div autoFocus>
  <ul>
    <li [attr.data-focus]="true" tabindex="0">1</li>
    <li [attr.data-focus]="true" tabindex="0">
      2
      <ul>
        <li tabindex="0">001</li>
        <li tabindex="0">002</li>
      </ul>
    </li>
    <li tabindex="0">3</li>
  </ul>
</div>

Live Demo

Answer 1

像这样更新您的选择器：

onFindingTree(parent) {
    const focusable = parent.querySelectorAll('[data-focus=true]');
    console.log(focusable.length);
}

`querySelectorAll` - returns 使用数据选择器查询时的空值

`querySelectorAll` - returns null value on query with data selector

angular-directive

angular