如何让angular2 [innerHtml]工作

前端之家收集整理的这篇文章主要介绍了如何让angular2 [innerHtml]工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > 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)是首选方法.

原文链接:https://www.f2er.com/angularjs/143645.html

猜你在找的Angularjs相关文章