处理 Pipes 返回的元素的点击事件 Angular 5

Handle click event of element returned by Pipes with Angular 5

我将 Ionic 3 与 Angular 5 一起使用,我想处理 Pipes 返回的元素的点击事件。我有以下代码:

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'>@</span>");
  }
}

post.html:

<ion-card-content>
    <p [innerHTML]="post.content | linkify"></p>
</ion-card-content>

因此,当 post.content 具有以下内容时:

Hello, @Whosebug! I'm @Igor

转向:

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

但是,我想处理span元素中的点击事件,所以,我尝试了:

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

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

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

我在 linkify.ts 上添加了 DomSanitizer:

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

而且我还在 post.tslinkify.ts 中添加了 openPage 函数(两者都检查事件是否被触发):

openPage(link) {
    console.log(link);
}

但是没有任何反应。我唯一注意到的是,当我单击该元素时,它会收到 class "activated",也就是说,Angular 正在检测事件,但不会触发该功能。

我该如何处理?

为什么不简化解决方案?将咔嗒声保持在它所属的位置,只用管道输送小东西。管道:

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

获取一个字符串,返回一个字符串。

以及您的组件模板:

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

并且该组件还实现了 go() 方法,因此一切都在它的位置。 Here 的工作原理。

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

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