[英]Bind HTML code string on Angular 2 template
I have HTML code on Component variable like below : 我在Component变量上有HTML代码,如下所示:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `Hi <div [innerHTML]="name"></div>`,
styleUrls: ['./app.component.css'],
styles: [`
.highlight {
background-color: yellow;
}
`],
})
export class AppComponent {
name :string ="dude ! <input type='text'/>";
}
It shows the output like "Hi dude !" 它显示类似“ Hi dude!”的输出。 But no text box there.How can I display the text box bind using component variable ?
但是那里没有文本框。如何使用组件变量显示文本框绑定?
This code is not secure. 此代码不安全。 So, rendering input elements is disallowed by default.
因此,默认情况下不允许渲染输入元素。 You need to use DomSanitizer to allow it:
您需要使用DomSanitizer来允许它:
constructor(sanitizer: DomSanitizer) {
this.name = sanitizer.bypassSecurityTrustHtml( this.name);
}
See the plunker sample that illustrates this. 请参阅说明这一点的插件示例 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.