如何在 Angular 中呈现静态 html 内容答案

【问题标题】：How to render static html content in Angular如何在 Angular 中呈现静态 html 内容
【发布时间】：2021-05-13 16:39:36
【问题描述】：

我们的 html 页面很少。我们正在从数据库中获取这些 HTML 页面的内容，但文件中存在标签。我们正在使用 innerHtml（属性绑定）将内容呈现到 Html 标记中。

我想在 Angular 应用程序中从数据库中呈现整个 HTML 页面。

有什么方法可以让我从后端提取数据以及 HTML 标签并在 Angular 中呈现这些数据？

【问题讨论】：

我不确定你在问什么，如果你能澄清一下。您是在谈论想要导入带有自己的 html、正文、元标记等的完整 html 页面吗？像 iframe 一样？或者作为他们自己的页面在应用程序中仍然允许路由和角度生命周期事件等？因为您不能只用另一个替换带有角度的 html 文档并期望任何东西都能正常工作。
我有一个服务（返回带有 Key:Value 的 JSON 字符串），通过它填充内部 HTML 内容。但是每当有更改时，我们需要通过变量名称在数据库中更改它。而不是我想在数据库中添加一个页面/ div 并从服务中获取它并在 Angular 组件中呈现。因此，每当发生更改时，我都必须对 HTML 进行更改/添加新内容并在数据库中更新它。这样不会对前端应用产生影响。

标签： angular

【解决方案1】：

我认为如果你传递带有元素类型和属性的 json，你可以使用 Renderer2 来动态呈现你想要的内容。 https://angular.io/api/core/Renderer2

【讨论】：

【解决方案2】：

我可以通过在数据库中存储将近 20 个 div 标签的 HTML 内容并从 API 中获取它们并使用 innerHTML 在 UI 上呈现来做到这一点。

【讨论】：

【解决方案3】：

您需要考虑您的 html 数据是否包含样式或标题。我想你总是可以“提取”<body> 和 <\body> 之间的内部 html 使用

const innerHTML=(data.match(/(?<=<body>)((.|\n)*?)(?=<\/body>)/) ||[""])[0];

data 是你拥有整个 html 的变量

【讨论】：