Angular 5中如何获取component最近元素并填充外部hidden field？

嘿，我来帮你搞定这个需求！你已经能获取到获焦的text field了，接下来咱们只需要两步：找到组件外部最近的hidden input，然后给它赋值就行。下面分场景给你具体实现代码：

核心思路 #

1. 从获焦的text field出发，定位到当前<app-focus>组件的DOM节点；
2. 查找组件周围最近的type="hidden"的input元素（可按兄弟顺序查找，或按页面位置计算）；
3. 给找到的hidden field设置目标值。

实现代码（Web Component 场景） #

假设你的<app-focus>是自定义Web Component，内部text field的focus事件处理逻辑如下：

class FocusComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<input type="text" id="focusInput" />`;
    this.input = this.shadowRoot.getElementById('focusInput');
    this.input.addEventListener('focus', this.handleFocus.bind(this));
  }

  handleFocus(e) {
    const focusedInput = e.target;
    // 获取组件的宿主DOM节点
    const componentHost = this.shadowRoot.host;
    
    let nearestHidden = null;

    // 第一步：先找组件前面的兄弟元素里的hidden
    let prevSibling = componentHost.previousElementSibling;
    while (prevSibling) {
      if (prevSibling.tagName === 'INPUT' && prevSibling.type === 'hidden') {
        nearestHidden = prevSibling;
        break;
      }
      prevSibling = prevSibling.previousElementSibling;
    }

    // 如果前面没有，再找组件后面的兄弟元素里的hidden
    if (!nearestHidden) {
      let nextSibling = componentHost.nextElementSibling;
      while (nextSibling) {
        if (nextSibling.tagName === 'INPUT' && nextSibling.type === 'hidden') {
          nearestHidden = nextSibling;
          break;
        }
        nextSibling = nextSibling.nextElementSibling;
      }
    }

    // 找到后填充值（这里用获焦input的value，你可以换成需要的内容）
    if (nearestHidden) {
      nearestHidden.value = focusedInput.value || 'Input is focused!';
      console.log('已填充最近的hidden field:', nearestHidden.value);
    }
  }
}

customElements.define('app-focus', FocusComponent);

实现代码（Vue 组件场景） #

如果你的<app-focus>是Vue单文件组件，代码可以这么写：

<template>
  <input type="text" @focus="handleFocus" />
</template>

<script>
export default {
  methods: {
    handleFocus(e) {
      const focusedInput = e.target;
      // 获取当前组件的根DOM元素
      const componentEl = this.$el;
      
      let nearestHidden = null;

      // 查找前序兄弟中的hidden input
      let prev = componentEl.previousElementSibling;
      while (prev) {
        if (prev.type === 'hidden') {
          nearestHidden = prev;
          break;
        }
        prev = prev.previousElementSibling;
      }

      // 前序没找到就找后序兄弟
      if (!nearestHidden) {
        let next = componentEl.nextElementSibling;
        while (next) {
          if (next.type === 'hidden') {
            nearestHidden = next;
            break;
          }
          next = next.nextElementSibling;
        }
      }

      // 填充目标值
      if (nearestHidden) {
        nearestHidden.value = focusedInput.value || 'Focus triggered!';
      }
    }
  }
}
</script>

进阶：按页面位置查找最近的Hidden Field #

如果hidden input不是组件的直接兄弟，而是在同一个父容器的其他位置，你可以通过计算元素位置来找到最近的：

// 在handleFocus函数中替换查找逻辑
const componentHost = this.shadowRoot.host; // 或Vue中的this.$el
const parentEl = componentHost.parentElement;
// 获取父容器内所有hidden input
const allHiddens = Array.from(parentEl.querySelectorAll('input[type="hidden"]'));

if (allHiddens.length > 0) {
  const componentRect = componentHost.getBoundingClientRect();
  // 计算每个hidden与组件的水平距离，取最近的
  nearestHidden = allHiddens.reduce((prev, curr) => {
    const currRect = curr.getBoundingClientRect();
    const prevDistance = Math.abs(prev.getBoundingClientRect().left - componentRect.left);
    const currDistance = Math.abs(currRect.left - componentRect.left);
    return currDistance < prevDistance ? curr : prev;
  });
  
  // 填充值
  nearestHidden.value = focusedInput.value;
}

这样不管hidden在组件的哪个方向，都能精准找到距离最近的那一个。

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