Angular2用组件替换文本

我正在组件模板中显示一个文本字符串

<p>{{ text }}</p>

{{text}

现在，如果我想在本文中自动将“candy”一词替换为“apple”，这将很容易，例如使用管道：

<p>{{ text | replaceCandy }}</p>

{{text|replaceCandy}

然而，当我想用超链接（HTML）代替“糖果”时，麻烦就开始了。HTML仅在以下情况下可用：

<p [innerHTML]="(text | replaceCandy)"></p>

这已经是一个问题，因为文本变量可能不安全。所以这并不是最好的选择

如果我想用自己制作的一个自定义组件：AppleComponent来替换“candy”，它会变得更加复杂。用“”替换字符串“candy”无效。输出为空

---

额外信息：我使用管道，因为它很容易重复使用。但这并不是必须的。只是在寻找问题的最佳解决方案。

如果希望将文本值输入到自定义组件，可以使用如下语法在自定义组件上声明输入值

export class CustomComponent {
    @Input() inputText: string;

然后在原始HTML中使用该组件，并使用属性语法对值进行数据绑定：

<p><custom-component [inputText]="text"></custom-component></p>

您可以使用a在不同组件之间进行选择：

找不到匹配项

---

当

text

为

apple

时，将显示

apple

组件。当

文本

为

橙色

时，将显示

橙色

组件。

您希望实现什么？应该将文本值输入到自定义组件吗？我希望文本字符串中的单词“candy”自动转换为特定组件。文本是动态的，总是不同的。它基于用户输入。例如，“我想要糖果”应该转换为“我想要”。也就是说，如果文本等于“苹果”。但是文本变量可以是例如：“我有一个苹果，Klas也有一个苹果，结果是“我有一个苹果，Klas也有一个苹果。”