typescript 如何选择多个dom元素的Angular ？

dgsult0t 于 2023-01-31 发布在 TypeScript

关注(0)|答案(1)|浏览(121)

<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"
  }
}

selector标签#sepinout只选择一个元素，我不知道如何同时选择多个元素，并且该函数对列表中的所有元素都有效
我尝试使用相同的选择器，但似乎不起作用，因为操作只发生在一个元素上

- 更新/解决方案**

<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"
  }
}

typescript

来源：https://stackoverflow.com/questions/75270123/how-to-select-multiple-dom-elements-in-angular

1条答案

按热度按时间

polhcujo1#

可以使用ViewChildren获取html的所有元素

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

类型脚本

@ViewChildren('sepinout') sepinouts!: QueryList<any>;

  sepout() {
    this.translateElements('0');
  }

  sepin() {
    this.translateElements('-2000px');
  }

  translateElements(translate: string) {
    this.sepinouts.toArray().forEach((item: any) => {
      item.nativeElement.style.translate = translate;
    });
  }

希望对你有帮助

赞(0）回复(0）举报 2023-01-31

我来回答

typescript 如何选择多个dom元素的Angular ？

1条答案

相关问题

热门标签

最新问答