时间戳

首页 > 解决方案 > 使用整个 hmtl 字符串作为包含 css 和 js 的模板

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

问题描述

我从我的 API 中得到一个完整的 HTML 页面作为字符串，其中包含 css（内联以及标题）和 javascript，如下所示：

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

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

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

我还尝试将组件的模板设置为字符串，但随后出现很多错误，例如意外字符“EOF”（您的模板中有未转义的“{”吗？使用“{{'{' }}") 来逃避它。）（因为我期望包含 js）和很多Unexpected 结束标记“span”。当标签已被另一个标签关闭时，可能会发生这种情况。（阅读这篇文章，我只希望有角不要碰我的弦）

在另一次尝试中，我刚刚创建了一个带有一个 div 的模板，然后由字符串填充。由于卫生原因没有工作，在添加了 bypassSecurityTrustHtml 后，它工作了，但是 css 完全搞砸了，所有的 js 都被删除了。

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

标签： angular

解决方案

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

  • 首先，加载脚本。

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

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

  • 二、从 HTML 和 CSS 字符串创建 DOM 元素

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

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

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

推荐阅读