如何让angular2 [innerHtml]工作[重复]答案

【问题标题】：How to get angular2 [innerHtml] to work [duplicate]如何让angular2 [innerHtml]工作[重复]
【发布时间】：2017-06-18 04:20:44
【问题描述】：

我不知道做错了什么，因为没有报告错误。

我有一个组件类

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",

【问题讨论】：

<div class="blog-post" [innerHtml]="testhtml"></div>
这对我有用：stackoverflow.com/a/43862386/1048800

标签： angular

【解决方案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）是首选方法。

【讨论】：

出于好奇，为什么首选解决方案二 (innerHtml="{{testhtml}}")？
@JamieStreet 插值（解决方案 3）实际上被转换为属性绑定（解决方案 2） - 请参阅本节底部：angular.io/guide/template-syntax#interpolation---- Angular 文档鼓励属性绑定语法，因此将熟悉与您合作的其他开发人员。
@JaimeStreet 我认为它的措辞很笨拙。 [innerHtml]="testHtml" 是首选解决方案。
嗨@Cobus Kruger，如果我运行这段代码，它工作正常，但是当我使用<input type="text" style="width:200px" name="fname">时它甚至不会显示在html中
嗨@Sachin Shah，你需要添加管道来解决这个问题，看看这个答案：stackoverflow.com/a/41089093/7452985

【解决方案2】：

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

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

【讨论】：