angular - 在父路由器出口渲染子路由

Question

我正在开发一个相当大的应用程序，其中包含很多相互关联的“实体”。让我们在一个简单的 CRUD 应用程序中简化应用程序，每种类型的实体都有很多“MasterDetail”屏幕。

（MasterDetail：左侧是实体列表/表格，右侧是单击左侧项目时的详细信息）

正如我所说，许多实体都“连接”到其他实体，因此，从细节中，您可以单击这些其他实体，这些实体有时会再次呈现在 MasterDetail 中，但为了简单起见，在本示例中，使用 Detail带有额外分页控件的页面（因此用户可以轻松转到下一个链接实体）

很多实体类型是相互关联的。为了避免循环依赖问题，我们必须使用 LazyLoading。（如果我们不这样做，我们最终会变成一个巨大的模块，这显然不是我们想要的）

我已经建立了一个例子：

左侧是列表/表格，右侧是详细信息的 MasterDetail 组件。

• 细节呈现在router-outletMasterDetail 内部。
• 连接实体的路由必须是“子路由”，因为路由组件必须可以访问 DetailComponent（可能通过组件注入？）

好的，现在的问题是：一切正常，除了我无法正确设置用户界面。当我从“DetailComponent”单击到连接的实体时，我不希望它呈现在 detailComponent 内，而是完全在 MasterDetail 下呈现。事实上，我想要“隐藏”（不是破坏，因为我需要状态），MasterDetail，所以我可以渲染细节，采用 MasterDetail 正在使用的完整大小。

我在考虑使用命名的路由器插座可能是一个解决方案，但我无法让它工作。

您可以在此处找到示例： https ://ng-run.com/edit/KzNjVgPMhXNob3QekJyv

有什么建议么？

标签： angularangular-router