在Angular模板中将纯文本与单击处理程序混合

Question

我目前有一个字符串，该字符串需要纯文本以及两个需要打开才能打开模式的人造链接的混合体。

假设我的字符串是：快速的棕色狐狸跳过了懒惰狗。

其中棕色和 lazy 将是带有点击处理程序的伪链接。 （我之所以说是虚假的，是因为它们不是锚标记的链接，而是带有（单击）处理程序的跨度。）

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

<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>

有什么想法吗？

谢谢！