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.bypassSecurityTrustScript(content)"></div>

这里是link to document