Angular 没有用外部 URL 显示我的 div 内容答案

【问题标题】：Angular not showing my div content with external URLAngular 没有用外部 URL 显示我的 div 内容
【发布时间】：2018-08-24 09:08:55
【问题描述】：

我有一段这样的html代码

<div 
  id='paysonContainer'
  url='https://test-www.payson.se/embedded/checkout?id=af1ebee5-40bd-410a-90d1-a94401553414'>
</div>

<script 
  type='text/javascript' 
  src='https://test-www.payson.se/embedded/Content/payson.js?v2'>
</script>

当我创建一个简单的 html 文件并将这段 html 代码粘贴到那里时，没有问题，我看到了我应该看到的内容，但是当我将相同的 html 代码复制到 Angular 应用程序中的视图时， div 没有加载，什么也不显示。你可以在这里查看https://stackblitz.com/edit/angular-7bkbm6（在 hello.component.html 上）如果你想看看不同之处，请在你的机器上创建一个简单的 html 文件，粘贴代码并在浏览器上打开它。

【问题讨论】：

Angular remove scripts from templates。考虑将此脚本声明为项目的资产。
@trichetriche 我觉得这行不通，因为脚本会被添加到页面的头部，并且不会有对应的div
如果您的脚本被添加到页面顶部，那么您应该没有问题。
为什么？一旦脚本执行，它就会寻找paysonContainer div，它不会存在......
@Yashar 结束标签似乎有问题，但确实有效：stackblitz.com/edit/angular-nkdqt6?file=src%2Findex.html。只需删除该结束标签并重写它

标签： angular angular6

【解决方案1】：

出于安全原因，脚本标签在 Angular 中无效。 Angular 会把它们撕掉。这是为了防止XSS攻击等。

如果您想加载一些 JS，请将其添加到您的 index.html 文件的 head 部分。或者，将其添加到脚本部分的 angular.json 中。如果你走后一条路线，你将需要重新启动 Webpack。

【讨论】：

我认为脚本标签不是问题，看我上面的评论