使用 bypassSecurityTrustHtml 管道时获取子元素的 ID onClick答案

【问题标题】：Getting a child element's ID onClick when using bypassSecurityTrustHtml Pipes使用 bypassSecurityTrustHtml 管道时获取子元素的 ID onClick
【发布时间】：2020-06-11 00:51:26
【问题描述】：

如何在点击父元素时捕获子元素的 ID？我有一个使用管道将主题标签和@提及转换为粗体彩色文本的视图。这种转换是在管道类中完成的。

组件模板有以下一行：

<div class="feed-card-text-body" id="textBody" (click)="tagClick() [innerHTML]="post.body|tagify"></div>

结果如下：

<div _ngcontent-rjl-c108="" class="feed-card-text-body" id="textBody" (click)="tagClick()>
    This is my testing post.
    <span id="#hashtags" style="font-weight: bolder; color: var(--navy);">#hashtags</span>
    <span id="#WootWoot" style="font-weight: bolder; color: var(--navy);">#WootWoot</span>. 
    <span id="@membername" style="font-weight: bolder; color: var(--purple-95);">@membername</span>
</div>

一切都按原样显示，但我希望点击事件tagClick() 捕获子span ID。例如，如果有人点击 #hashtags 跨度，我希望点击事件返回该跨度的 ID。

在大多数情况下，通过将点击事件附加到实际元素，可以通过模板轻松解决此问题，但是，因为它是由管道处理的，我很难过。

【问题讨论】：

标签： angular angular-pipe

【解决方案1】：

解决方案非常简单。在 Angular 中，(click) 绑定，当在方法参数中包含$event 时，将提供被点击元素的对象数据。因此，将tagClick() 修改为tagClick($event) 是唯一需要进行的模板更改。

<div _ngcontent-rjl-c108="" class="feed-card-text-body" id="textBody" (click)="tagClick($event)>
    This is my testing post.
    <span id="tag_hashtags" style="font-weight: bolder; color: var(--navy);">#hashtags</span>
    <span id="tag_WootWoot" style="font-weight: bolder; color: var(--navy);">#WootWoot</span>. 
    <span id="at_membername" style="font-weight: bolder; color: var(--purple-95);">@membername</span>
</div>

然后将组件类中的tagClick()方法改成tagClick(event)。这将允许您通过event.target 对象访问单击元素的对象数据，如下所示：

tagClick(event): void {
  const id = event.target.id;
  const atRegex = /^at_/gi;
  const tagRegex = /^tag_/gi;

  if (atRegex.test(id)) {
    console.log('Mentioned ' + id.replace('at_', '@'));
  }
  if (tagRegex.test(id)) {
      console.log('Hashtag ' + id.replace('tag_', '#'));
  }
}

【讨论】：