html - 在 Angular 模板中混合纯文本和点击处理程序

Question

我目前有一个需要纯文本的字符串以及两个需要可点击才能打开模式的虚假链接的混合。

假设我的字符串是：敏捷的棕色狐狸跳过懒惰的狗。

棕色和懒惰将是带有点击处理程序的虚假链接。（我说虚假是因为它们不是锚标签意义上的链接，而是跨越（点击）处理程序）。

为了实现这一点，我有一些相当臭的（至少我是这么认为的）代码，看起来像：

<span>The quick</span>
<span (click)="onClickBrown()">brown</span>
<span>fox jumps over the</span>
<span (click)="onClickLazy()">lazy</span>
<span>dog.</span>

我在想是否有一种更优雅的方式来处理这个问题，也许 Angular 本身就包含了，或者我可以创建一些管道来做类似的事情：

<span>The quick {{ brown | methodPipe: onClickBrown }} fox jumped over the {{ lazy | methodPipe: onClickLazy }} dog.</span>

想法，想法？

谢谢！

标签： htmlangularangular-pipe