Angular 7组件中如何获取点击元素的ID属性值

你的实现方式存在几个关键问题，导致无法正确获取点击元素的ID：

1. @ViewChild('li') 是用来查找模板中带有模板引用变量（即#li）的元素，但你的<li>标签并没有添加这个标记，所以showAllData会是undefined。
2. @HostListener("click") 监听的是整个组件的点击事件，而非单个<li>的点击，即便能拿到元素，也不是你点击的那个具体li。
3. 完全没必要依赖jQuery，Angular本身提供了足够的DOM操作能力，混合使用反而容易引发问题。

下面是几种简单可行的解决方案：

方案1：直接给每个li绑定点击事件 #

这是最直观的方式，直接在每个<li>上绑定(click)事件，通过$event获取点击目标，或者直接传递ID：

方式1.1：通过$event获取ID #

HTML代码：

<div class="col-md-6 col-xl-6 col-sm-6"> 
  <ul> 
    <li id="l1" (click)="onLiClick($event)">name1</li> 
    <li id="l2" (click)="onLiClick($event)">name2</li> 
    <li id="l3" (click)="onLiClick($event)">name3</li> 
    <li id="l4" (click)="onLiClick($event)">name4</li> 
  </ul> 
</div>

组件类代码：

onLiClick(event: MouseEvent) {
  // 把事件目标转为HTMLLIElement类型，确保能访问id属性
  const clickedLi = event.target as HTMLLIElement;
  console.log('点击的li ID:', clickedLi.id);
}

方式1.2：直接传递ID（更简洁） #

如果提前知道每个li的ID，也可以直接把ID作为参数传入点击事件：

HTML代码：

<div class="col-md-6 col-xl-6 col-sm-6"> 
  <ul> 
    <li id="l1" (click)="onLiClick('l1')">name1</li> 
    <li id="l2" (click)="onLiClick('l2')">name2</li> 
    <li id="l3" (click)="onLiClick('l3')">name3</li> 
    <li id="l4" (click)="onLiClick('l4')">name4</li> 
  </ul> 
</div>

组件类代码：

onLiClick(liId: string) {
  console.log('点击的li ID:', liId);
}

方案2：使用事件委托（适合li数量多或动态生成的场景） #

如果你的li是动态生成的，或者数量较多，不想给每个li都绑定事件，可以用事件委托：给父元素<ul>绑定点击事件，然后通过事件冒泡找到点击的li元素。

HTML代码：

<div class="col-md-6 col-xl-6 col-sm-6"> 
  <ul (click)="onUlClick($event)"> 
    <li id="l1">name1</li> 
    <li id="l2">name2</li> 
    <li id="l3">name3</li> 
    <li id="l4">name4</li> 
  </ul> 
</div>

组件类代码：

onUlClick(event: MouseEvent) {
  const target = event.target as HTMLLIElement;
  // 验证点击的确实是li元素，避免点击ul的空白区域触发
  if (target.tagName.toLowerCase() === 'li') {
    console.log('点击的li ID:', target.id);
  }
}

这样不管有多少个li，只需要绑定一次事件，性能更优，也更易维护。

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