Question

我正在编写一个Angular 2应用程序，在某些部分需要呈现从外部API加载的HTML。

通过使用angulars [innerHTML]指令

，这适用于纯静态HTML

<div [innerHtml]="htmlToBeRendered"> </div>

正在注入的HTML是从内容管理系统加载的。有时这个HTML需要有一些Javascript-Code用于纯粹的＆＃34; UI＆＃34;目的（注入HTML中的一些简单的DOM操作）。这将是vanilla JS并且不依赖于其他一些框架，如JQuery。

有没有办法保留这个JS代码，同时通过angular绑定到dom？目前所有的JS代码都被Angular删除了。

我知道这是一个安全功能，但加载HTML的API可以被认为是一个安全的＆＃34;源。

Answer 1

我相信您可以将DomSanitizer用于此用例。此服务采用bypassSecurityTrustHtml方法专门针对您的问题设计：

@Component({
    selector: 'test',
    template: `<div [innerHtml]="htmlToBeRendered"> </div>`
})
export class TestComponent {

   public htmlToBeRendered: SafeHtml;

   constructor(public sanitizer: DomSanitizer, public htmlService: SomeApi){}

   public getStaticHtml(): void {
      this.htmlService.getStaticHtml().subscribe((html: string) => {
        this.htmlToBeRendered = this.sanitizer.bypassSecurityTrustHtml(html);
      });
   } 

}

有关详细信息，您也可以查看我的answer

Angular 2：绑定HTML内容，保留javascript代码

1 个答案: