angular - 为单个路由渲染多个组件？

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

你可能有多个router outlet，但是它们不能用一个URL激活，因为你在配置Route config的时候，路径必须是唯一标识的。

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