如何从动态HTML执行脚本标记

Question

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

我需要在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

您可以使用从“@DomSanitizer/platform-browser”导入{}来清理添加到模板中的动态数据。

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

这是链接到文档