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

Question

[如何从父元素上单击来捕获子元素的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跨度，我希望click事件返回该跨度的ID。

在大多数情况下，通过将click事件附加到实际元素上，可以很容易地通过模板解决此问题，但是由于它是由管道处理的，因此我很困惑。

Answer 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_', '#'));
  }
}