javascript - 获取最接近组件 Angular 5 的元素

Question

我在组件中有一个文本字段，当它处于焦点状态时，需要填充离它最近的组件外部的隐藏字段。

目前我可以获得焦点字段，但我现在需要做的是填充隐藏字段。

这是我目前所拥有的:

HTML:

<h2>Test</h2>
<input type="hidden" id="h0" name="" value="">
<app-focus></app-focus>
<input type="hidden" id="h0" name="" value="">
<app-focus></app-focus>
<input type="hidden" id="h0" name="" value="">
<app-focus></app-focus>
<input type="hidden" id="h0" name="" value="">
<app-focus></app-focus>

应用焦点:

<p>
  focus works!
  <input id="inputId" type="text" name="" value="">
</p>

组件:

ngAfterViewInit(){
  setTimeout(()=>{
    let dummyEl = this.elRef.nativeElement.querySelectorAll("#inputId")
    for(let i = 0; i < dummyEl.length; i++){
    let el = dummyEl[i]
    // if (document.activeElement === el){ stops working if I use this
       console.log(document.activeElement === el)
        console.log(el.closest("#h0"))//always returns null

// }
  }
}, 3000)

}

Answer 1

closest 搜索直接后代，但不搜索后代的 sibling ，例如

<div>
    <input id="#h0">
    <app-root>
        <p>
            <input id="#inputId">
        </p>
    </app-root>
</div>

在此 HTML 中，从 #inputId 元素调用 closest 只会找到 div，而不是 input 因为它不是直接后代 - 它是 div 的子代。

您需要修改您的 html，以便 app-root 和 #h0 被 div 包裹。然后，您可以找到最接近的 div 并选择该元素的子元素，例如

ngAfterViewInit() {
    setTimeout(() => {

      let dummyEl = this.elRef.nativeElement.querySelectorAll('#inputId');
      for(let i = 0; i < dummyEl.length; i++) {
        let el = dummyEl[i];

        let div = el.closest('div');
        if(div !== null) {
          console.log(div.querySelector('#h0'));
        }
      }
    }, 3000);
  }
}

此外，您的 id 必须是唯一的，因此对每个输入使用 #h0 是无效的 HTML。如果你想找到具有相同“标签”的元素，你可能会更好地使用一个类，例如

<input class="h0" ... >