angular - 为什么在 Application Shell 中托管 MFE 远程应用程序时 DOM 不更新？

Question

这个问题是关于具有微前端架构的角度应用程序。

远程应用程序具有数据表和过滤器，其中过滤器隐藏在扩展面板中。当通过 http://localhost:4201 访问远程应用程序时，一切都按预期运行；过滤器展开/隐藏，数据表排序、分页等。

当远程应用程序托管在 shell 应用程序中时，任何表格排序、分页、过滤器扩展等都不起作用。要使 DOM 相应更新，请单击我！需要点击页面顶部的按钮。该按钮只不过是一个模态窗口，但在呈现时也会呈现页面上的其他 DOM 更新。

代码可在以下位置查看：https ://github.com/Astrofyziky/srm

1. 克隆以下仓库：https ://github.com/Astrofyziky/srm
2. 导航到工作区并在终端中运行npm install
3. 通过在终端中键入nx run dashboard-shell:serve-mfe来运行项目
4. 打开 Chrome 并导航到 http://localhost:4201。
5. 尝试表格排序、过滤和分页功能。这是预期的行为。
6. 导航到 http://localhost:4200/data-grid
7. 只需单击一次选择过滤条件。注意它是如何不扩展的。
8. 单击左上角标有“单击我”的按钮！注意过滤器现在是如何扩展的。
9. 选择一个状态过滤器。注意找到的结果如何变化，显示结果如何变化，以及分页（在页面底部）如何变化；暗示事件正在触发并且 DOM 仅部分更新。
10. 点击点击我！再次按钮并注意 DOM 是如何更新它在第 9 步中应该有的。

标签： angularwebpacknrwl-nxmicro-frontend

Answer 1

BrowserModule 被导入到太多的模块和库中。只需要将 BrowserModule 导入到 shell 应用程序中。