Question

我有一个分配了HTML文本框标记的变量。我想显示为文本框并访问其值

@Component({
  selector: 'app-field-add',
  templateUrl: './field-add.component.html',
  styleUrls: ['./field-add.component.css']
})
export class FieldAddComponent implements OnInit 
{
    public htmlTextBox ="<input type='text' [(ngModel)]='Field'  name='Field'>"
}

在模板上，我已经放置了变量

{{ htmlTextBox }}

Answer 1

这就是您在div中显示纯文本的方式，

解决方案1：

<div class="blog-post">{{testhtml}}</div>

但这会写出文本，而不是HTML。

对于HTML，您需要绑定到属性

解决方案2：

<div class="blog-post" [innerHtml]="testhtml"></div>

省略方括号将绑定到该属性，因此您需要再次插值

解决方案3：

<div class="blog-post" innerHtml="{{testhtml}}"></div>

属性绑定（解决方案2）是首选方法。

Answer 2

角度安全性阻止HTML和其他脚本的动态呈现。您需要使用DOM Sanitizer绕过它们。

请在下面更改您的代码：

// in your component.ts file

//import this 
import { DomSanitizer } from '@angular/platform-browser';


// in constructor create object 

constructor( 
...
private sanitizer: DomSanitizer

...
){

}

someMethod(){
 let htmlTextBox ="<input type='text' [(ngModel)]='Field'  name='Field'>"
 this.htmlData = this.sanitizer.bypassSecurityTrustHtml(htmlTextBox ); // this line bypasses angular security

}

并在HTML文件中；

<!-- In Your html file-->
    <div [innerHtml]="htmlData">
    </div>

您可以在此处了解更多信息：Angular security

工作示例：Working stackblitz

Answer 3

尝试innerHtml：

<div [innerHtml]="htmlTextBox">
</div>

存储在变量中的html输入文本框标记在角度模板中显示

3 个答案: