html - 将 HTML 输入元素注入跨度在 Angular 2 中不起作用

Question

嗨，我有表单问题需要用户替换句子中的文本。例如...“今天是”，用户将在其中填写当天，但我无法单独通过“innerHtml”注入输入。我把我当前的代码放在下面：

private _replacementInput: string = '<input type="text" class="replacement-input">';
public get replacementInput() : SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(this._replacementInput);
}

constructor(private _sanitizer: DomSanitizer) {
}

然后在我看来，我有：

Today is <span [innerHtml]='replacementInput'></span>

据我所知，我的代码是正确的，但我仍然得到一个空的 span 标签，而不是一个里面有输入的标签。

Answer 1

看起来我的问题与我的实现有关。基本上，文本作为对象的一部分传递给组件，它看起来像“今天是（？）”，我用组件中的输入替换“（？）”。

然而，这已经通过 [innerHtml] 添加到跨度标签中，所以它看起来像下面这样：

<span [innerHtml]="formObject.question">
    Today is <span [innerHtml]="replacementInput></span>
</span>

我编辑了@Zze stackblitz 示例，向你们展示了这个实现是如何工作的。

@Zze 示例： https ://stackblitz.com/edit/angular-nh4ptm

我编辑的例子： https ://stackblitz.com/edit/angular-lkz4uc