如何让angular2 [innerHtml]工作

发布时间：2020-12-17 07:57:07 所属栏目：安全来源：网络整理

导读：参见英文答案 Angular HTML binding15个因为没有错误报告,我不知道出了什么问题. 我有一个组件类 import { Component,OnInit,ViewContainerRef } from '@angular/core';@Component({ selector: 'app-root',templateUrl: './app.component.html',styleUrls:

参见英文答案 > Angular HTML binding15个
因为没有错误报告,我不知道出了什么问题.

我有一个组件类

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

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 testhtml = "<p>Hello world</p>";
    constructor(){}

 }

}

在我的模板文件中,我做了类似这样的事情：

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

但这似乎不起作用.还有其他我需要导入的东西吗？

我正在使用angular-cli“版本”：“1.0.0-beta.26”,

Angular使用{{property}}来插值.这就是你在div中显示纯文本的方式,就像这样

解决方案1：

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

但那会写出文字,而不是HTML.

对于HTML,您需要绑定到该属性

解决方案2：

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

注意我将[innerHtml]移动到div标签内.

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

解决方案3：

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

属性绑定(解决方案2)是首选方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!