Angular 7如何从动态HTML执行脚本标签

Question

我正在将GrapesJS 和Lory slider 集成到angular 7 中，我需要加载编辑器生成的内联脚本来为滑块提供功能。

我需要在 HTML 中动态加载组件，这就是我使用“dynamic-html”组件的原因。

我尝试使用指令重新加载脚本，但没有任何效果，Angular 似乎找不到该元素。

TS

@Component({
  selector: 'app-paginas',
  styleUrls: ['./paginas.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
  template : `<dynamic-html [content]="pagina.html"></dynamic-html>`
})

编辑器在“pagina.html”中返回的脚本

<script>var items = document.querySelectorAll('#ixuhz');        for (var i = 0, len = items.length; i < len; i++) {          (function(){var e=this,t="https://cdnjs.cloudflare.com/ajax/libs/lory.js/2.3.4/lory.min.js",l=["0","false"],s="";s="true"==s?1:parseInt(s,10);var a={slidesToScroll:parseInt("1",10),enableMouseEvents:l.indexOf("")>=0?0:1,infinite:!isNaN(s)&&s,rewind:!(l.indexOf("")>=0),slideSpeed:parseInt("300",10),rewindSpeed:parseInt("600",10),snapBackSpeed:parseInt("200",10),ease:"ease",classNameFrame:"gjs-lory-frame",classNameSlideContainer:"gjs-lory-slides",classNamePrevCtrl:"gjs-lory-prev",classNameNextCtrl:"gjs-lory-next"},r=function(){window.sliderLory=lory(e,a)};if("undefined"==typeof lory){var n=document.createElement("script");n.src=t,n.onload=r,document.head.appendChild(n)}else r()}.bind(items[i]))();        }</script>

期待得到一些结果，但没有找到任何东西

尝试用 Jquery 或 JS 获取元素

ngAfterViewInit(){
  console.log($("#ixuhz"));
}

Answer 1

您可以使用import {DomSanitizer} from '@angular/platform-browser' 清理添加到模板中的动态数据。

但我认为需要像这样使用它 <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(content)"></div>

这里是link to document