angular - 使用 [(ngModel)] 通过 innerHtml 绑定输入元素

Question

我有一个组件 ts 文件，如下所示

import { Component, OnInit } from '@angular/core';  

@Component({
  template: '<div [innerHtml]='htmlContent'></div>'
})

export class DesignComponent implements OnInit {

modelValue='abcd';

htmlContent='<input type="text" [(ngModel)]="modelValue" name="model"> ';

constructor(){}

}

在我的模板中，我使用如下所示的 innerHtml 方法插入 html

<div [innerHtml]='htmlContent'></div>

因此，它将输出显示为输入框，但 ngModel 值未呈现到输入框中。

我也尝试使用 sanitize，仍然模型值没有插入输入框。

消毒尝试了两种方式，例如，

this.htmlContent= this.sanitizer.bypassSecurityTrustHtml(htmlContent);
this.htmlContent= this.sanitizer.sanitize(SecurityContext.HTML, htmlContent);

如何使用 angular2/4/5 实现这一点？

提前致谢