时间戳

首页 > 解决方案 > 使用 Single-SPA 选择在根 HTML 上呈现应用程序的位置

angular - 使用 Single-SPA 选择在根 HTML 上呈现应用程序的位置

问题描述

我打算使用带角度的单 SPA 框架来为网站构建微前端架构。该网站已经以传统的单体方式存在，我们计划将其扼杀到微前端架构中，以让独立团队工作并进行独立部署。

我的计划是使用实际的单体作为单 SPA 的根，并将微前端一一扼杀，与实际的单体共存。我做了一些测试，共存是可能的，但单 SPA 总是在我的页面末尾呈现应用程序。

问题是，例如，是否可以将具有单 SPA 的应用程序渲染到我的 HTML 上的特定位置，例如在特定 div 元素内。这是我现在一直在做的一个非常简单的测试，这就是我在单 SPA 上注册角度应用程序的方式。通过这样做，它总是在我的 body 元素的末尾呈现应用程序。

         <script>
            System.import('single-spa').then(function (singleSpa) {

                singleSpa.registerApplication(
                    'dashboard',
                    function () {
                        return System.import('dashboard');
                    },
                    function (location) {
                        return location.pathname.startsWith('/dashboard');
                    }
                );

                singleSpa.start();
            })
        </script>

标签： angularsingle-spa

解决方案

这个问题的答案不是那么直截了当，所以我会分解它。

我的计划是使用实际的单体作为单 SPA 的根，并将微前端一一扼杀，与实际的单体共存。

single-spa 团队建议不要尝试将根配置放入应用程序以更好地分离关注点。另请参阅“我应该有父/根应用程序和子应用程序”和“架构概述”。相反，您应该有一个独立的根配置，并且您的第一个单水疗应用程序应该是单体应用程序。

问题是是否可以将具有单个 SPA 的应用程序呈现到我的 HTML 上的特定位置

domElementGetter通过将选项传递给 singleSpaAngular ，这在单水疗应用程序级别是可能的。

或者，如果在根配置中使用 single-spa-layout，您可以从配置中实现相同的目的。

在特定的 div 元素中

这就是我觉得有必要进一步深入研究的地方。虽然您可以将应用程序安装在 DOM 中的任意位置，但您不应该期望尝试在单spa 应用程序中安装单spa 应用程序。相反，如果在它们之间使用相同的框架，则可以通过跨微前端导入来共享组件，或者使用单 spa Parcels进行跨框架互操作。

推荐阅读