Angular中如何选择多个DOM元素？菜单交互场景问题解决

需求：在Angular项目中，实现鼠标进入.modal_itm元素时，触发对应.sep元素的样式变化；鼠标离开时恢复样式。

问题现象 #

使用重复的模板引用变量#sepinout绑定所有.sep元素后，仅第一个.sep元素会响应鼠标事件，其余元素无任何变化。

原模板代码 #

<div class="modalmenu"  >
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#ab">SOBRE MI</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#his">HISTORIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#ex">EXPERIENCIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#cont">CONTACTO</a></div>
  <div class="sep" #sepinout></div>
</div>

原组件逻辑代码 #

export class NavBarComponent {
  sepin(sepinout: HTMLElement){
    sepinout.style.translate = "0px"
  }

  sepout(sepinout: HTMLElement){
    sepinout.style.translate = "-2000px"
  }
}

解决方案 #

为每个.sep元素设置唯一的模板引用变量（如#sepinout1、#sepinout2等），并在对应的.modal_itm的鼠标事件中传入匹配的变量，确保每个菜单项对应正确的分隔元素。

修改后的模板代码 #

<div class="modalmenu">
      <span class="material-symbols-outlined nbcont_x">close</span>
      <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div>
      <div class="sep" #sepinout></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout1)" (mouseleave)="sepout(sepinout1)"><a href="#ab">SOBRE MI</a></div>
      <div class="sep" #sepinout1></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout2)" (mouseleave)="sepout(sepinout2)"><a href="#his">HISTORIA</a></div>
      <div class="sep" #sepinout2></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout3)" (mouseleave)="sepout(sepinout3)"><a href="#ex">EXPERIENCIA</a></div>
      <div class="sep" #sepinout3></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout4)" (mouseleave)="sepout(sepinout4)"><a href="#cont">CONTACTO</a></div>
      <div class="sep" #sepinout4></div>
</div>

组件逻辑代码（无修改） #

export class NavBarComponent {
  sepin(sepinout: HTMLElement){
    sepinout.style.translate = "0px"
  }

  sepout(sepinout: HTMLElement){
    sepinout.style.translate = "-2000px"
  }
}

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