angular - 使用整个 hmtl 字符串作为包含 css 和 js 的模板

Question

我从我的 API 中得到一个完整的 HTML 页面作为一个字符串，包含 css(内联以及 header )和 javascript，看起来像这样:

<script></script>
<style></style>
<div></div>
.
.
.
</html>

没有外部文件，只有一个完整的 HTML 页面。

我尝试通过一个函数将 document.innerHtml 设置为字符串内容，HTML 在这种情况下或多或少起作用，但脚本部分是 obv。忽略。

我还尝试将组件的模板设置为字符串，但随后出现了很多错误，例如意外字符“EOF”(您的模板中是否有未转义的“{”？使用“{{ '{' }}”)对其进行转义。)(因为我希望包含 js)和很多 意外的结束标记“span”。当标签已经被另一个标签关闭时，可能会发生这种情况。(阅读这个，我只是希望 angular 不要触及我的字符串)

在另一次尝试中，我刚刚创建了一个带有一个 div 的模板，然后用字符串填充它。由于卫生原因无法正常工作，在添加绕过 SecurityTrustHtml 后，它可以正常工作，但 css 完全困惑，所有 js 都被删除。

我知道这不是 Angular 的工作方式，但我们有一个正在运行的软件需要迁移到 Angular 并且页面是由 Python 引擎生成的，所以我没有真正的方法来更改字符串在我从 api 获取它之前。如果有一种方法可以从字符串中读取部件、css、脚本并以某种方式将它们单独传递到页面，我也会很满意(只要它不会花费太多性能)

Answer 1

我会将问题分成两部分，附加 html 和 css，然后添加 javascript。

• 首先，加载脚本。

如前所述，您收到的整个内容都有一个字符串。因为你知道 javascript 将在 <script>...</script> 之间标签，您可以使用正则表达式或其他方式获取它。获得脚本 url 后，您可以按照 this 加载它。计算器或其他。

有几种方法可以附加可在 Angular 中使用的脚本，stackoverflow 包含很多方法。

• 其次，从 HTML 和 CSS 字符串创建 DOM 元素

与之前类似，您可以提取 HTML 和 css 代码。完成后，您可以使用 DOMParser Api将您的字符串转换为适当的 DOM 元素。

• 三、使用Renderer2添加创建的DOM元素

Angular 允许以安全的方式操作应用程序的 DOM 元素。这是通过 Renderer2 API 完成的.特别是 appendChild方法允许您将 DOM 元素添加到您想要的任何其他 DOM 元素。您可以使用此 API 添加您收到的内容。