Angular HTML绑定

Question

我正在写一个Angular应用程序,{{myVal}}我想要显示一个响应.

我怎么做？如果我只是使用绑定语法,innerHTML它会编码所有div字符(当然).

我需要以某种方式将a的内部html绑定{{myVal}}到变量值.

Answer 1

正确的语法如下:

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

在工作 8.2.13

文档参考

Answer 2

Angular 2.0.0和Angular 4.0.0 final

仅为了安全的内容

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

DOMSanitizer

潜在的不安全HTML需要使用Angulars DOM清理程序明确标记为受信任,因此不会删除内容中可能不安全的部分

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

用管子

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

另请参见在RC.1中,无法使用绑定语法添加某些样式

和文档:https://angular.io/api/platform-b​​rowser/DomSanitizer

安全警告

信任用户添加的HTML可能会带来安全风险.前面提到的文档陈述:

调用任何bypassSecurityTrust...API会禁用Angular对传入值的内置清理.仔细检查并审核进入此调用的所有值和代码路径.确保为此安全上下文适当地转义任何用户数据.有关详细信息,请参阅" 安全指南".

角度标记

就像是

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

同

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

不会导致Angular处理Angular特定的任何内容foo.Angular使用生成的代码替换构建时的Angular特定标记.Angular不会处理运行时添加的标记.

要添加包含特定于角度的标记(属性或值绑定,组件,指令,管道......)的HTML,需要在运行时添加动态模块和编译组件.这个答案提供了更多细节如何使用/创建动态模板来使用Angular 2.0编译动态组件？

Answer 3

[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样式

Answer 4

在angular2@2.0.0-alpha.44上:

使用时,Html-Binding不起作用{{interpolation}},改为使用"Expression":

无效

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

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

正确

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

- >这是正确的方法.

您可以在表达式中添加其他元素,例如:

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

暗示

除了用于安全目的的清理之外,Angular不会以任何方式处理使用[innerHTML](或通过其他类似element.appenChild()或类似的方式动态添加)添加的HTML .
只有将HTML静态添加到组件模板时,此类操作才有效.如果需要,可以在运行时创建一个组件,如我如何使用/创建动态模板以使用Angular 2.0编译动态组件中所述？

Answer 5

如果它包含用户创建的内容,则不使用Angular的DOM清理程序直接使用[innerHTML].@GünterZöchbauer 在他的回答中提出的safeHtml管道是一种消毒内容的方法.以下指令是另一个指令:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

要使用的

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

Answer 6

这对我<div innerHTML = "{{ myVal }}"></div>有用:(Angular2,Alpha 33)

根据另一个SO:使用angular2(在Angular2中的一般DOM操作)将HTML从服务器插入DOM,"inner-html"相当于Angular 1.X中的"ng-bind-html"

Answer 7

这里已经提供了简短的答案：使用<div [innerHTML]="yourHtml">绑定。

然而，这里提到的其余建议可能会产生误导。当你绑定到这样的属性时，Angular 有一个内置的清理机制。由于 Angular 不是一个专门的清理库，它对可疑内容过于热心，不承担任何风险。例如，它将所有 SVG 内容清理为空字符串。

您可能会听到建议，通过使用DomSanitizer方法将内容标记为安全来“清理”您的内容bypassSecurityTrustXXX。也有建议使用管道来做到这一点，管道通常被称为safeHtml.

所有这些都是误导性的，因为它实际上绕过了 sanitizing，而不是 sanitizing 您的内容。这可能是一个安全问题，因为如果您对用户提供的内容或您不确定的任何内容执行此操作，您就会面临恶意代码攻击。

如果 Angular 通过其内置的清理删除了你需要的东西——你可以做的而不是禁用它是将实际清理委托给擅长该任务的专用库。例如——DOMPurify。

我为它制作了一个包装库，因此它可以很容易地与 Angular 一起使用：https : //github.com/TinkoffCreditSystems/ng-dompurify

它还有一个管道来声明性地清理 HTML：

<div [innerHtml]="value | dompurify"></div>

与此处建议的管道的不同之处在于，它实际上确实通过 DOMPurify 进行清理，因此适用于 SVG。

要记住的一件事是 DOMPurify 非常适合清理 HTML/SVG，但不是 CSS。所以你可以提供 Angular 的 CSS sanitizer 来处理 CSS：

import {NgModule, ?_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ?_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

它是内部的——hense?前缀，但这也是 Angular 团队在他们自己的包中使用它的方式。该库也适用于 Angular Universal 和服务器端渲染环境。

Answer 8

只是为了得到一个完整的答案,如果您的html内容在组件变量中,您还可以使用:

<div [innerHTML]=componementVariableThatHasTheHtml></div>

Answer 9

如果我在这里忽略了这一点,我道歉,但我想推荐一种不同的方法:

我认为最好从服务器端应用程序返回原始数据并将其绑定到客户端的模板.由于您只从服务器返回json,因此这会产生更灵活的请求.

对我来说,如果您正在做的就是从服务器获取html并将其"按原样"注入DOM中,那么使用Angular似乎没有意义.

我知道Angular 1.x有一个html绑定,但我还没有看到Angular 2.0中的对应物.他们可能会在以后添加它.无论如何,我仍然会考虑为你的Angular 2.0应用程序提供数据api.

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

Answer 10

只需[innerHTML]在您的HTML 中使用属性，如下所示：

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

您的组件中是否曾经有过包含一些 html 标记或需要在模板中显示的实体的属性？传统的插值将不起作用，但innerHTML 属性绑定来救援。

使用{{myVal}} 不按预期工作！这不会拾取像<p>,<strong>等的 HTML 标签，并且仅将其作为字符串传递...

想象一下，您的组件中有以下代码：

const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'

如果您使用{{myVal}}，您将在视图中看到：

<strong>Stackoverflow</strong> is <em>helpful!</em>

但使用[innerHTML]="myVal"使结果如预期：

计算器是有帮助的！

Answer 11

 <div [innerHTML]="HtmlPrint"></div><br>

该innerHTML的是HTML的元素，它允许你设置它的HTML内容编程的特性。还有一个innerText 属性，它将内容定义为纯文本。

所述[attributeName]="value"框支架，围绕该属性定义的角输入结合。这意味着，属性的值（在您的情况下为innerHtml）绑定到给定的表达式，当表达式结果更改时，属性值也会更改。

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