Загрузка внешнего скрипта в DOM при вызове rest во время выполнения

Question

Я пытаюсь внедрить сценарий html в мое приложение Angular 9 (из решения стороннего платежного портала).

Я загрузил данные в angular очень хорошо (с вызов API остальных), и я делаю это в component.ts, чтобы попытаться отобразить его.

snippetData() {
  return this.sanitizer.bypassSecurityTrustHtml(this.checkoutSnippet);
}

И это в шаблоне html.

<div class="col-6" [innerHTML]="snippetData()"></div>

Я вижу что содержимое обновляется соответствующим образом в DOM, см. рисунок ниже.

Div с идентификатором "paysonContainer" и выделенным зеленым скриптом get вставлен из этого скрипта в DOM.

Скрипт, однако, никогда не загружается, глядя на вкладку сети в Firefox, он просто не запускается.

Что мне нужно сделать, чтобы скрипт загрузился?

Answer 1

Попробуйте добавить его динамически в тег "head".

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
var head = document.head;
head.appendChild(s);