Javascript 如何在应用程序中插入模板部分？

我正在使用Angular构建一个web应用程序，它从服务器端接收部分

每个部分包含以下内容：

• Html模板
• CSS规则

注意：部分通常较小。

我现在正在研究管理客户端和服务器端之间通信的最佳实践

我的第一个想法是将html和css作为字符串接收，并将它们注入文档中，如下所示：

interface section {
   html: 'this is html',
   css: 'css rules'
};

然后简单地将它们注入文档中：

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString(section.css);



function addHtmlString(str) {
   var node = document.createElement('div');
   node.innerHTML = str;
   document.body.appendChild(node);
}

addHtmlString(section.html);

我发现这种方法的问题是，当从模板中删除部分时，如何从html和css代码中删除其内容

另一种建议的方法是将CSS作为文件获取，然后将文档与获取的文件绑定

---

有什么建议吗？或者更好的方法？

最好的方法不是从服务器获取HTML/CSS以在Angular应用程序中显示它，而是获取结构化数据（JSON，…）并以Angular方式本机呈现。Angular擅长使用模板渲染数据，因此这样做只会让您的生活变得更加艰难。

试试看

---

使用它，您可以在服务器上生成角度组件。并在前端使用它。

实际上，您的方法有很多局限性。我需要从服务器获取的部分的类型和样式各不相同，然后我建议您将它们简单地放在iFrame中。谢谢，我将阅读文档并检查使用它的可能性。在查看Angular universal之后，我猜它会在服务器端呈现整个应用程序，但在我的例子中，我有一个web应用程序的部分。