TypeScript：点击Div时如何获取其中隐藏段落的文本

嘿，我来帮你搞定这个问题！你遇到的情况其实是在Angular里操作DOM时的常见小问题，咱们分两种方式来解决，其中一种还是Angular推荐的最佳实践哦：

方式一：用模板引用变量（推荐，更符合Angular风格） #

这种方法不用直接操作DOM，通过模板引用变量就能直接拿到隐藏段落的元素，简单又可靠：

修改HTML代码： #

给隐藏的<p>标签加一个模板引用变量（比如#hiddenPara），然后在点击事件里直接把这个变量传进去：

<div class="tile" style="left:40px;top:55px;" (click)="getTextFromHiddenParagraph(hiddenPara)"> 
  <p>{{this.terms[0].termName}}</p> 
  <p hidden #hiddenPara>{{this.terms[0].connectionName}}</p> 
</div>

对应的TypeScript代码： #

在组件类里定义方法，直接接收这个段落元素，然后获取文本：

getTextFromHiddenParagraph(hiddenPara: HTMLParagraphElement) {
  const hiddenText = hiddenPara.textContent;
  console.log('隐藏段落的文本：', hiddenText);
  // 这里可以做你需要的后续操作
}

方式二：直接操作DOM（如果你坚持用getElementsByTagName） #

你之前用getElementsByTagName没成功，大概率是因为没正确定位到父Div元素——如果点击的是显示的<p>，event.target会是那个子元素，而不是绑定点击事件的Div。咱们可以用event.currentTarget来获取真正绑定事件的Div：

TypeScript代码修改： #

getTextFromHiddenParagraph(event: MouseEvent) {
  // 先把currentTarget转换成Div元素类型
  const parentDiv = event.currentTarget as HTMLDivElement;
  // 获取Div下所有的p标签
  const allParagraphs = parentDiv.getElementsByTagName('p');
  // 第二个p就是隐藏的那个（索引从0开始）
  if (allParagraphs.length > 1) {
    const hiddenText = allParagraphs[1].textContent;
    console.log('隐藏段落的文本：', hiddenText);
  }
}

为什么之前失败？ #

event.target是你实际点击到的元素（比如显示的<p>），而event.currentTarget才是绑定了(click)事件的父Div，所以用currentTarget才能正确找到包含隐藏段落的容器，再通过getElementsByTagName拿到所有p标签，取第二个就对啦。

总的来说，第一种模板引用变量的方式更符合Angular的设计理念，也更不容易出错，推荐优先使用~

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