【问题标题】：Is there a way to achieve 2-step routing in angular?有没有办法以角度实现两步路由？
【发布时间】：2018-08-10 22:51:16
【问题描述】：

我什至不知道如何命名我遇到的问题。我也想避免使用辅助路线。我一直在尝试在 Angular 应用程序中创建类似两步路由的东西。

理论上，这应该是嵌套路由。但我认为假设是，如果您使用无组件路由，则子路由将路由到父插座，这是行不通的。在每个功能路线中使用相同的组件是解决方案 #2。我想要介于两者之间的东西，它是所有无组件子路由的相同“包装器”。

外部路由

外层路由器有2条路由：

/login：显示登录组件
其他所有内容都应包装在应用程序外壳中。 app shell 是一个带有侧边栏、导航栏和路由器插座的组件，所有实际内容都应该放在其中

内部路由

应用程序有多个功能模块，理想情况下，每个模块都应定义其路由。一个示例可能是用户个人资料：

/profile/settings: 显示shell里面的设置
/profile/account：在 shell 中显示帐户详细信息

解决方案 1

为每个模块定义一个通用的路由模块，例如AppRoutingModule:

const routes: Routers = [
  { path: 'login', component: LoginComponent },
  { path: '', component: AppShellComponent, children: [...] }
]

这限制了我进行适当的分离或使用延迟加载等功能。

https://stackblitz.com/edit/angular-routing-solution1

解决方案 2

在每个路由模块上使用AppShellComponent，例如ProfileRoutingModule

const routes: Routes = [
  { path: 'profile', component: AppShellComponent, ... }
]

这更接近解决方案，但现在我有多个 AppShellComponent 实例，这意味着每次应用程序从一个模块导航到另一个模块时需要额外的资源和重新加载。

https://stackblitz.com/edit/angular-routing-solution2

解决方案 3

封装了登录和外壳组件的组件。它知道应用程序是否已登录并显示模板的适当部分。这将被路由到''。这违背了我试图提出的解决方案的目的。

有我缺少的解决方案吗？：/

【问题讨论】：

您将什么定义为“次要”路线？
二级出口，由角度angular.io/guide/router#secondary-routes定义。这基本上是在与主要出口相同的水平上添加第二个出口，例如/login(popup: wrong-password)
两步路由是什么意思？您的两种解决方案都没有意义。在解决方案 1 中，您想对所有模块使用相同的路由文件吗？解决方案 2 您想对所有路由使用相同的组件吗？解决方案 3 听起来您不了解路由的工作原理以及何时使用它们。所有的解决方案都没有意义。
@LogicDev 很难解释您不知道术语或不完全理解的问题。我有一个非常具体的问题，它有一个非常具体的解决方案。在解决方案 1 中，如果我没有使用 loadChildren，那么是的，我必须在同一个文件中列出所有子项，因为一次只有 1 个路由匹配。在解决方案 2 中，我仍然需要用外壳包裹每个内页，因此我必须重复使用相同的组件。解决方案3，显然在路由方面是错误的，但可以在没有路由的情况下解决问题。

标签： angular routing

【解决方案1】：

您确实想要在这里嵌套路由；您似乎缺少的部分是使用LoadChildren 来定义哪些孩子进入“外壳”。

基本上，您的应用路由模块将是（示例利用延迟加载）：

 {
    path: '',
    component: ShellComponent,
    children: [
        { path: 'profile', loadChildren: 'profile/profile.module#ProfileModule' },
        ...
    ],
 },
 {
    path: 'login'
    component: LoginComponent
 }

ShellComponent 当然有自己的router-outlet

【讨论】：

其实这就是我现在所拥有的。问题是shell子需要住在一个路由模块中，类似于解决方案1。
我不确定我是否明白你在说什么。你不想要多个路由模块？
我在这里有一个完整的例子：github.com/DeborahK/MovieHunter-communication/tree/master/… 和它的描述：stackoverflow.com/questions/49037127/… 你可以在 github 代码中看到我有完整的功能模块/延迟加载支持。（虽然 SO sn-ps 中没有显示。）
@DimitriosK。为什么他们必须留在 1 个路由文件中？那么你应该只使用完整路径而不是嵌套模块或路由。在同一个路由模块中给出完整的 url/路径和应该加载的组件。
@BradleyDotNET 对不起，我在手机上看到了这个，有点错过了结构。我拥有的是单个 loadChildren 属性，而不是具有多个 loadChildren 条目的子数组。尽管AppRouting 需要“知道”所有路由入口点，但我认为没有办法解决这个问题。谢谢 :) @DeborahK 我实际上看过你关于复数视觉的路由课程来解决这个确切的问题：D

【解决方案2】：

我也遇到过同样的问题。我尝试了很多东西：引导不同的模块，不同的根组件，通过路由器模块配置解决它。就我而言，它需要添加包装外壳所有功能模块，但只有一个。

最后我找到了一个简单的解决方案。您可以在AppComponent 中提供任意数量的router-outlet，但根据某些条件仅保留1 个。所以我制作了 1 个 router-outlet 包裹着 app shell 样式，并为我的特殊情况制作了 1 个裸露的。

【讨论】：