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

【问题标题】：Loading external script into DOM at from rest call at runtime在运行时从 rest 调用将外部脚本加载到 DOM
【发布时间】：2020-03-09 21:45:17
【问题描述】：

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

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

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

这在 html 模板中。

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

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

id 为“paysonContainer”的 div 和绿色脚本中的轮廓从该脚本插入到 DOM 中。

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

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

【问题讨论】：

为什么要在运行时而不是在构建时加载脚本
因为它是由第 3 方生成的，并且可能随时更改。我无法控制它，我得到两个 html 标记（脚本和 div）作为对其 api 的“启动结帐”调用的字符串结果返回。
有趣。似乎是一个非常糟糕的结帐提供商，并且不是特别适合有角度的应用程序，因为这是一种非角度的反模式。此外，您不应该希望您的应用程序中的代码在没有您的祝福的情况下更改，因为某些东西可能会破坏。但不要使用函数来设置内部 HTML。只需将结果设置为一个属性并设置它。
我同意它不太理想。但这是我发现的最好的支付解决方案，适用于我所在国家/地区的本地支付方式。我也尝试设置结果属性，它没有工作，同样的结果。我只是尝试了上面的代码作为绝望的尝试，看看它是否有所作为。

标签： javascript angular angular9

【解决方案1】：

尝试在“head”标签中动态追加。

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

【讨论】：

这是在 angular2 (9) 应用程序中，我更愿意留在 angular 内解决问题。
angular app里面有js代码有什么问题？
Angular2+ 是打字稿。混合 .js 和 .ts 很脏。 Angular 还可以完全控制 DOM，所以虽然我可能怀疑它的良好做法。
先试一试，如果可行，我们将从那里找到最佳实践。
这整个事情都不是很好的做法，打字稿无论如何都会编译成 JavaScript。浏览器不运行打字稿