Angular 7, как выполнить скрипт тэга из динамического HTML - PullRequest
Новая
       47

Angular 7, как выполнить скрипт тэга из динамического HTML

1 голос
/ 28 мая 2019

Я интегрирую 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>

Ожидается получить некоторый результатно ничего не найти

Slider Without Script Loading

Попытка получить элемент с помощью Jquery или JS 

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

1 Ответ

0 голосов
/ 28 мая 2019

вы можете использовать import {DomSanitizer} из '@ angular / platform-browser' для очистки динамических данных, добавленных в шаблон.

Но я думаю, что нужно использовать это так <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(content)"></div>

Вот ссылка на документ

...