我正在写一个Angular应用程序,我有一个HTML响应,我想显示。

我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。

我需要以某种方式将一个div的innerHTML绑定到变量值。


当前回答

<div [innerHTML]=“HtmlPrint”></div><br>

innerHtml是HTML-Elements的一个属性,它允许你以编程的方式设置它的html-content。还有一个innerText属性,它将内容定义为纯文本。

属性周围的[attributeName]="value"方括号定义了一个Angular输入绑定。这意味着,属性的值(在您的例子中是innerHtml)绑定到给定的表达式,当表达式结果改变时,属性值也会改变。

所以基本上[innerHtml]允许你绑定和动态改变给定html元素的html内容。

其他回答

你可以使用以下两种方法。

<div [innerHTML]="myVal"></div>

or

<div innerHTML="{{myVal}}"></div>

只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件,并且对它不能像我一样工作感到沮丧,可以看看我写的ngx-dynamic-hooks库来解决这个问题。

有了它,您可以从动态字符串/html加载组件,而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer,但保留了加载组件的能力(以一种安全的方式)。

在这部《斯塔克布利茨》中可以看到它的作用。

在angular2@2.0.0-alpha.44:

当使用{{插值}}时,html绑定将不起作用,请使用“表达式”来代替:

无效的

<p [innerHTML]="{{item.anleser}}"></p>

->抛出错误(插值而不是期望的表达式)

正确的

<p [innerHTML]="item.anleser"></p>

->这是正确的方式。

你可以在表达式中添加额外的元素,比如:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

hint

使用[innerHTML]添加的HTML(或通过其他方式如element. appendchild()或类似方式动态添加的HTML)不会被Angular以任何方式处理,除非出于安全目的进行消毒。 只有当HTML被静态地添加到组件模板中时,这些事情才会起作用。如果你需要这个,你可以在运行时创建一个组件,就像在如何使用/创建动态模板来编译Angular 2.0的动态组件中解释的那样?

如果我错过了重点,我很抱歉,但我想推荐一种不同的方法:

我认为最好从服务器端应用程序返回原始数据,并将其绑定到客户端模板。这使得请求更加灵活,因为您只从服务器返回json。

对我来说,如果你所做的只是从服务器获取html并将其“原样”注入到DOM中,那么使用Angular似乎没有意义。

我了解Angular 1。x有一个html绑定,但我在Angular 2.0中还没有看到对应的绑定。不过他们以后可能会加进去。不管怎样,我还是会考虑为你的Angular 2.0应用提供一个数据api。

如果您感兴趣的话,这里有一些带有简单数据绑定的示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

[innerHtml]在大多数情况下是一个很好的选择,但当你需要在html中硬编码样式时,它会失败。

我想分享其他方法:

你所需要做的就是在你的html文件中创建一个div,并给它一个id:

<div #dataContainer></div>

然后,在你的Angular 2组件中,创建对这个对象的引用(这里是TypeScript):

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

然后简单地使用loadData函数将一些文本附加到html元素。

这只是一种使用原生javascript的方式,但在Angular环境中。我不推荐这样做,因为这会使代码更加混乱,但有时也没有其他选择。

另见Angular 2 - innerHTML样式