Angular2 按组件替换文本

Question

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

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

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

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

但是，当我想用​​超链接 (HTML) 替换“糖果”时，麻烦就来了。 HTML 只有在像这样使用时才有效:

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

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

如果我想用我制作的自定义组件替换“糖果”，它会变得更加复杂:AppleComponent。用 ""替换字符串 "candy"不起作用。输出为空。

额外信息:我使用管道是因为它易于重复使用。虽然不是必需品。只是寻找问题的最佳解决方案。

Answer 1

如果你想将文本值输入到自定义组件，你可以使用这样的语法在自定义组件上声明一个输入值

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

然后您使用原始 HTML 中的组件，并使用属性语法对值进行数据绑定(bind):

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