Angular指令使用data属性选择器调用querySelectorAll返回长度为0问题

问题原因 #

• 选择器与实际DOM属性不匹配：你在HTML中通过[attr.data-focus]="true"给元素绑定的是data-focus属性，但querySelectorAll中使用的选择器[focus=true]匹配的是无data-前缀的focus属性，二者不一致导致无法匹配到对应元素。
• 注意自定义属性如果通过[attr.data-*]绑定，最终渲染到DOM上的属性名一定会保留data-前缀，选择器必须完整匹配属性名才能生效。

修复方案 #

修改onFindingTree方法内的选择器，匹配完整的data-focus属性即可：

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

修改后即可正常获取到2个符合条件的<li>元素。

内容的提问来源于stack exchange，提问作者3gwebtrain