Question

您可以看到我有项目列表，现在我可以将.innerTXT传递给我单击的任何项目的

标记，但是当我单击一些嵌套项目（例如统计信息->测试）时，我想不仅显示“测试”的整个路径，有人可以帮我解决这个问题吗？

到目前为止，我已经完成了此操作，但是它显示的是整个列表，而不是单击单个元素

    document.getElementById("menu-content").addEventListener("click",function(e) {
      const input = event.target as HTMLElement;
      console.log(input.nodeName);
      if(e.target && input.nodeName == "LI") {
        (document.getElementById('txt') as HTMLElement).innerHTML = input.innerText;
      }
    });

    <ul id="menu-content" class="menu-content collapse out">

      <li id="node1" ><i class="fa fa-dashboard fa-lg"></i> Dashboard </li>
      <li id="node2" data-toggle="collapse" data-target="#statistics" class="collapsed">
        <i class="fa fa-area-chart fa-lg"></i> Statistics <span class="arrow"></span>
      </li>

      <ul class="sub-menu collapse" id="statistics">
        <li id="node21">Tests</li>
        <li id="node23">Devices</li>
        <li id="node24">Builds</li>
        <li id="node25">Services</li>
        <li id="node26">Projects</li>
      </ul>

      <li id="node3" data-toggle="collapse" data-target="#reports" class="collapsed">
        <i class="fa fa-file-text fa-lg"></i> Reports <span class="arrow"></span>
      </li>

      <ul class="sub-menu collapse" id="reports">
        <li>Tests</li>
        <li>Devices</li>
        <li>Builds</li>
        <li>Services</li>
        <li>Projects</li>
      </ul>

      <li id="node4"><i class="fa fa-wrench fa-lg"></i> Configurations </li>

      <li id="node5" data-toggle="collapse" data-target="#overview" class="collapsed">
        <i class="fa fa-book fa-lg"></i> Overview <span class="arrow"></span>
      </li>

      <ul class="sub-menu collapse" id="overview">
        <li>Tests</li>
        <li>Devices</li>
        <li>Builds</li>
        <li>Services</li>
        <li>Projects</li>
      </ul>

    </ul>

Answer 1

检查一下。我根据您的问题构建了此文件，但您可以对其进行修改以使其更加动态。

https://stackblitz.com/edit/angular-vpfat5

html

  <ul class="sub-menu collapse" id="statistics">
    <li *ngFor="let item of listItems;let i = index" (click)="onItemClick('statistics',i)">{{ item }}</li>
  </ul>

组件

 listItems = ['Tests','Devices','Builds','Services','Projects'];
  onItemClick(category:string, index: number)
  {
    console.log(`${category} -> ${this.listItems[index]}`)
  }

单击后从<ul> <li>元素获取文本值

1 个答案: