Question

由于没有错误报告，我不知道出了什么问题。

我有一个组件类

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“version”：“1.0.0-beta.26”，

Answer 1

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 ）是首选方法。

Answer 2

你必须像这样在标签内添加属性。

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

如何使angular2 [innerHtml]工作

2 个答案: