Angular 2.0.0和Angular 4.0.0 final

对于安全的内容

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

DOMSanitizer

潜在的不安全HTML需要使用angular的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-browser/DomSanitizer

安全警告

相信用户添加的HTML可能会带来安全风险。之前提到的文档状态:

调用任意一个bypassSecurityTrust…api禁用Angular内置的对传入值的处理功能。仔细检查和审计进入此调用的所有值和代码路径。确保任何用户数据都为此安全上下文进行了适当的转义。更多详细信息请参见《安全指南》。

角标记

类似的

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

with

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

不会导致Angular在foo中处理任何特定于Angular的东西。 Angular在构建时用生成的代码替换Angular特定的标记。在运行时添加的标记不会被Angular处理。

要添加包含特定于angular的标记(属性或值绑定、组件、指令、管道等)的HTML，需要添加动态模块并在运行时编译组件。 如何在Angular 2.0中使用/创建动态模板来编译动态组件?

动态添加元素到DOM的方法，正如在Angular 2文档中解释的那样，是使用@Angular/core中的ViewContainerRef类。

你要做的是声明一个指令，它将实现ViewContainerRef，并充当DOM上的占位符。

指令

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

然后，在你想要注入组件的模板中:

HTML

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

然后，从注入的组件代码中，注入包含你想要的HTML的组件:

import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }

}

我在Angular 2上添加了一个完全可用的演示应用，动态地将组件添加到DOM演示中

正确的语法如下:

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

文档参考

Angular 2.0.0和Angular 4.0.0 final

对于安全的内容

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

DOMSanitizer

潜在的不安全HTML需要使用angular的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-browser/DomSanitizer

安全警告

相信用户添加的HTML可能会带来安全风险。之前提到的文档状态:

调用任意一个bypassSecurityTrust…api禁用Angular内置的对传入值的处理功能。仔细检查和审计进入此调用的所有值和代码路径。确保任何用户数据都为此安全上下文进行了适当的转义。更多详细信息请参见《安全指南》。

角标记

类似的

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

with

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

不会导致Angular在foo中处理任何特定于Angular的东西。 Angular在构建时用生成的代码替换Angular特定的标记。在运行时添加的标记不会被Angular处理。

要添加包含特定于angular的标记(属性或值绑定、组件、指令、管道等)的HTML，需要添加动态模块并在运行时编译组件。 如何在Angular 2.0中使用/创建动态模板来编译动态组件?

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

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

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

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

如果你想在Angular 2或Angular 4中使用它，同时还想保持内联CSS，那么你可以使用它

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