为单个路线渲染多个组件？

Question

我有一个应用程序，它使用三列布局，基本上是一个导航列、一个工具箱和一个主要内容区域。并非所有这些组件都不一定总是存在。我现在想在这些列中呈现不同的组件。

目前，我通过从左到右对组件进行硬编码来做到这一点：导航栏始终存在，旁边是router-outlet。在该路由器内部，编辑器被加载，提供的侧边栏是硬编码的。这很丑，有两个原因：

• 我想允许用户重新排序这些列。但由于“不正确”的亲子关系，这很困难。如果所有列都是兄弟，那会容易得多。
• 除此之外，导航栏完全是一团糟，其中包含大量 switch-case 语句，以根据当前路线显示正确的导航类型。

我正在寻找的是这样的：

<router-outlet name="navigation"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>

起初我认为辅助路线是我正在寻找的东西。但是在做了一些阅读之后，这些路由似乎在导航 URL 中引入了一个完全独立的子树？我想根据完全相同的 URL 呈现这些组件。

我当然可以通过引入一个充满 switch 语句的元侧边栏来做我自己的“某种”路由，就像我在导航中所做的那样。但这确实 a) 破坏了延迟加载，并且 b) 使用起来不是很愉快。

如果到目前为止我一直在抽象，这是一个非常准确的用例：主要内容区域是某种 SQL、CSS 或 HTML 编辑器。根据具体编辑的内容，导航列将数据显示到某个级别。另一列或多或少是一个上下文相关的工具箱，它根据编辑内容的类型显示不同的项目。所有三个组件都需要来自 URL 的完全相同的信息：当前正在编辑的内容是什么？

Answer 1

你可能有多个路由器出口，但是它们不能用一个 URL 激活，因为当你配置 Route config 时，路径必须唯一标识。

您可能必须编写自定义逻辑来读取 URL params，并在此基础上调用一些嵌入式子路由，这些路由将为您的不同区域获取不同的组件。