清理Angular2中的输入

要将普通HTML插入angular2应用程序,您可以使用该[innerHtml]指令.

这不适用于具有自己的组件和指令的HTML,至少不会像您期望的那样.

但是,如果您确实收到了不安全的html警告,那么HTML在注入之前您应该信任第一个警告.你必须使用DomSanitizer这样的东西.例如,

元素被认为是安全的.一个元素是没有的.

export class AppComponent  {

    private _htmlProperty: string = '';

    public get htmlProperty() : SafeHtml {
       return this.sr.bypassSecurityTrustHtml(this._htmlProperty);
    }

    constructor(private sr: DomSanitizer){}
}

并让您的模板与此保持一致:

虽然有点单挑:

警告:使用不受信任的用户数据调用此方法会使应用程序面临XSS安全风险!

如果您打算更多地使用此技术,您可以尝试编写一个@Pipe来完成此任务.

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'trustHtml'
})
export class TrustHtmlPipe implements PipeTransform  {    
   constructor(readonly sr: DomSanitizer){}  

   transform(html: string) : SafeHtml {
      return this.sr.bypassSecurityTrustHtml(html); 
   } 
} 

如果您有这样的管道,您AppComponent将改为此.不要忘记将管道添加到您的声明数组中NgModule:

@Component({
   selector: 'app',
   template: `
`
})
export class AppComponent{

    public htmlProperty: string = '';

} 

或者你可以写一个@Directive来做同样的事情:

@Directive({
   selector: '[trustHtml]'
})
export class SanitizeHtmlDirective {

    @Input()
    public set trustHtml(trustHtml: string) {
      if (this._trustHtml !== trustHtml) {
        this._trustHtml = trustHtml;
        this.innerHtml = this.sr.bypassSecurityTrustHtml(this.trustHtml);
      }
    }

    @HostBinding('innerHtml')
    innerHtml?: SafeHtml;

    private _trustHtml: string;

    constructor(readonlysr: DomSanitizer){}
}

如果您有这样的指令,您AppComponent将改为此.不要忘记将指令添加到您的声明数组中NgModule:

@Component({
   selector: 'app',
   template: `
`
})
export class AppComponent{

    public htmlProperty: string = '';

} 

---

如果我正确的话,规格已经改变了...... alpha.51.现在到处都是CamelCase(元素标签除外).别客气 :)

---

哦,男孩,我试过`inner-html`.糟糕...谢谢!