Javascript 处理角度为5的管道返回的元素的单击事件

我将离子3与Angular 5一起使用，我希望处理管道返回的元素的单击事件。我有以下代码：

linkify.ts

：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'linkify',
})
export class LinkifyPipe implements PipeTransform {
    transform(value: string) {

    return value.replace(/@([a-z0-9_.]+)/gi, "<span class='link'>@$1</span>");
  }
}

return this.sanitizer.bypassSecurityTrustHtml(value.replace(/@([a-z0-9_.]+)/gi, "<span class='link' tappable (click)='openPage($1)'>@$1</span>"));

因此，当

post.content

包含以下内容时：

Hello, @StackOverflow! I'm @Igor

转向：

Hello, <span class='link'>@StackOverflow</span>! I'm <span class='link'>@Igor</span>

但我在控制台上收到以下消息：

警告：正在清除某些内容（请参阅 )

我已经在

linkify.ts

上添加了

DomSanitizer

：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'linkify',
})
export class LinkifyPipe implements PipeTransform {
    transform(value: string) {

    return value.replace(/@([a-z0-9_.]+)/gi, "<span class='link'>@$1</span>");
  }
}

return this.sanitizer.bypassSecurityTrustHtml(value.replace(/@([a-z0-9_.]+)/gi, "<span class='link' tappable (click)='openPage($1)'>@$1</span>"));

但什么也没发生。我注意到的唯一一件事是，当我点击元素时，它接收到类“activated”，也就是说，Angular正在检测事件，但它没有启动函数

---

我如何处理这个问题？

为什么不简化解决方案？保持点击在它所属的位置，只对小东西进行管道连接。管道：

@Pipe({name: 'myPipe'})
export class MyPipe {
  transform(value: string) {
    return `@${value}`;
  }
}

获取字符串，然后重新运行字符串

和您的组件模板：

<span class='link' (click)="go(whatever) [innerHTML]="'StackOverflow' | myPipe"></span>

---

最后，我找到了一种让它工作的方法。保留管道并在我的组件上创建了一个
HostListener
：

@HostListener("click", ["$event"])
  onClick(e) {
    if (e.target.classList.contains("link")) console.log(e.target);
  }

或者再次使用消毒剂。我只是觉得你弄乱了那里的范围。但是，按照你建议的方式，所有元素都会对点击事件做出反应，我只希望
@提到的内容
做出反应。我使用的是动态内容，所以我无法像您那样设置“name”元素，所以我使用管道来检测
@提及
并转换它。如果我错了，请纠正我。你找到办法让它工作了吗？@calebeaires是的。我保留了这个管道并在我的组件上创建了一个HostListener:
@HostListener（“click”，[“$event”]）onClick（e）{if（e.target.classList.contains（“link”））console.log（e.target）；}
@HostListener("click", ["$event"])
  onClick(e) {
    if (e.target.classList.contains("link")) console.log(e.target);
  }