0

据我所知，使用微前端时有两种流行的情况——

1) 带有组件的单页（每个都有自己的服务） 2) 可从仪表板/导航栏访问多个页面（每个部分都有自己的服务）

我已经挖掘了一段时间，据我所知，案例 1 在使用 Angular 自定义元素时非常简单。

问题是我需要解决案例 2。根据设计，我有一个仪表板（页面侧面的导航栏），其中包含不同组件入口点（报告、用户等）的路由列表。

我希望这部分成为容器，并且容器导航栏上的每条路线都通向一个单独的微前端，该微前端可以独立存在并作为容器的一部分。因此，当我构建完整站点时，我将拥有例如 reportService、userService 等......以及主/容器服务。

我无法弄清楚实现该目标的最佳方法是什么，我看过各种各样的文章，但我仍然看不到一条清晰的道路（准备好产品等...）

是否有任何流行且可用于生产的方法？

编辑：这个想法是例如 - 能够让两个团队各自在网站的单独部分（单独的上下文）上工作，而不会相互影响。两者都有站点的独立部分，并且在部署时可以将更改添加到主包含站点。这两个子站点之间的连接很少（如果有的话），它们可以单独运行或在容器内运行。

我添加了一篇文章的链接，该文章解释了我的问题以及更多内容，并且做得比我做得更好 https://martinfowler.com/articles/micro-frontends.html

4

2 回答 2

0

现在我正在开发一个与您所要求的类似的项目。我目前的方法是使用库single-spa来组织和导入不同的微前端。我目前有一个导航栏，它是一个始终显示的角度应用程序，并使用角度路由在导航下方加载的其他应用程序之间进行更改。你可以从这里开始。

于 2019-10-23T09:13:57.307 回答
0

我在我的项目中遵循了这种方法，希望它可以帮助你

从仪表板/导航栏访问多个页面（每个部分都有自己的服务）

我们基于 UserModule、ReportsModule、InitialModule 等功能创建了多个模块，以便我们可以根据路由懒加载不同的模块。

每个模块都有自己的模块所需的服务、组件、类和资产。例如，InitialModule 将只有与 Login 和 Dashboard 相关的组件，我们将其设置为bootstrap模块，main.ts以便通过仅下载这两个组件所需的 js、CSS 和 HTML 来快速加载页面，而不是所有资产

于 2019-10-03T12:57:40.290 回答