问服务器呈现部分DOM并将其注入到角应用程序中。
EN

Stack Overflow用户

提问于 2020-11-18 02:23:43

回答 3查看 210关注 0票数 6

让我们考虑一下，我们有一个标准的浏览器角度(v.11 )仪表板应用程序:仪表板包含小部件，这些部件是从API和显示值(KPI、图表、表等)获取数据的组件。

问题是：有在服务器上呈现小部件并将它们注入仪表板DOM?的方法吗？

由于这些小部件是角组件，我的想法是角是否可以在服务器上运行，将组件编译成静态DOM并将其注入运行角应用程序的浏览器中。

我尝试了环球，但这是真正的预渲染第一页，不认为它可以是好的情况，或？

谢谢!

angular

server-side-rendering

回答 3

Stack Overflow用户

发布于 2020-11-20 11:41:41

通用可以预录制应用程序模块的所有组件，一旦您进入该页面的路由，Universal也会预先呈现它们，而不仅仅是第一页。

如果你没有发现通用的完美解决方案，你可以使用木偶绘制页面的预渲染。请查找下面的参考资料。

https://developers.google.com/web/tools/puppeteer/articles/ssr

票数 1

Stack Overflow用户

发布于 2020-11-25 10:04:49

如果你不想使用角度环球，还有其他几种方法来做到这一点。

( 1)在index.html页面服务时将html注入.

我以前用Asp.Net做过这件事。您可以通过控制器向index.html页面提供服务，并使用控制器修改页面，将小部件html注入其中。您使用一个带有id的template标记，这样这个角度应用程序就可以查询它，然后插入到DOM中。角有一个名为Renderer2的服务，用于执行DOM操作。

( 2)使用http请求获取小部件html

我以前也这样做过。一旦加载了将html作为字符串返回的应用程序，您就可以发出http请求。然后，您可以使用Renderer2服务将html注入dom。

更新

在上面的回答中，我没有提到小部件部分的呈现。有一件事还没有被指出，那就是角编译所有东西都是JavaScript，而不是静态html，所以即使您找到了在服务器上编译它们的方法--这是有办法的，您也不会得到静态的html。

有几种可能性取决于您是希望在请求索引页时还是在用户进入仪表板页面时注入小部件。让你知道，我只是在理论上，并没有尝试过这些。您可以动态导入JavaScript代码。您还可以使用脚本标记创建html片段，并使用上述方法之一加载html。然后，您必须动态创建选择器并将其添加到DOM中。

这些都需要一些研究。现在我很好奇是否可以这样做，所以我将尝试其中的一些，看看会发生什么。

更新2

好吧，我很高兴能尝试这个。我会用码头来做这个。几年后，我使用Azure管道和Docker容器编译了一个角库，并创建了一个npm包并将其上传到私有npm注册表中。我认为，没有国家预防机制的部分，你也可以这样做。我不是Docker方面的专家，但是如果您可以动态安装节点，那么您应该能够发出api请求来获取小部件数据，然后将其写入小部件中。

票数 1