Javascript 在运行时从rest调用将外部脚本加载到DOM中

我正在尝试将html脚本注入我的Angular 9应用程序（来自第三方支付门户解决方案）

我已经很好地将数据加载到angular中（使用RESTAPI调用），我正在component.ts中执行此操作以尝试显示它

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

这在html模板中

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

我可以看到内容在DOM中相应地更新，请参见下图

id为“paysonContainer”的div和绿色脚本将从此脚本插入DOM

但是，该脚本从未加载，查看Firefox中的网络选项卡，它根本没有运行

---

我需要做什么才能加载脚本？

尝试在“head”标记中动态附加脚本

---

为什么要在运行时而不是在构建时加载脚本，因为它是由第三方生成的，可以随时更改。我无法控制它，我得到两个html标记（script和div），作为对它们的api.interest的“initiate checkout”调用的字符串结果返回。似乎是一个相当糟糕的结帐服务提供商，不太适合角度应用程序，因为这是一个非角度反模式。此外，你不应该希望你的应用程序中的代码在没有你的许可的情况下发生变化，因为可能会有东西坏掉。但是不要使用函数来设置内部HTML。只需将结果设置为一个属性并设置它，我同意它不太理想。但这是我发现的最好的支付解决方案，适用于我国的当地支付方式。我也尝试过设置一个result属性，但没有效果，结果是一样的。我只是不顾一切地尝试上面的代码，看看它是否有什么不同。这是在angular2（9）应用程序中，我更愿意留在angular2内来解决问题。angular2+是typescript，angular2+内有js代码有什么问题。混合.js和.ts是脏的。Angular还可以完全控制DOM，因此虽然可能，但我怀疑它的良好实践。首先尝试一下，如果它有效，我们将从中找到最佳实践。这一切都不是良好实践，typescript无论如何都会编译为JavaScript。浏览器不运行typescript

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