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

Question

我将 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.ts 和 linkify.ts 中添加了 openPage 函数（两者都检查事件是否被触发）：

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

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

我该如何处理？

Answer 1

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

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

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

以及您的组件模板：

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

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

Answer 2

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

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

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

Handle click event of element returned by Pipes with Angular 5

javascript

angular

typescript

angular5

angular-pipe