对多个空路径的 Angular Router 逻辑感到困惑

Question

在学习 Angular 路由器的工作原理时，我遇到了一些我不太理解的令人费解的行为。似乎如果您有这样的路由配置设置（每个延迟加载的模块都有自己的路由配置，其中只包含一个空路径和一个组件：

export const appRoutes: Routes = [
   { path: "", component: DefaultComponent },
   { path: "", loadChildren: "./module-one/module-one.module#ModuleOne" },
   { path: "two", loadChildren: "./module-two/module-two.module#ModuleTwo" },
   { path: "three", loadChildren: "./module-three/module-three.module#ModuleThree" },
   { path: "one", loadChildren: "./module-one/module-one.module#ModuleOne" },
]

然后导航到/two，然后将创建ModuleOne，然后将创建ModuleTwo，最后将创建ModuleTwo 创建的SecondComponent。但是，ModuleOne 应该创建的组件没有创建。

• 1) 为什么要创建 ModuleOne，为什么要先创建？

• 2) 为什么ModuleOne 没有创建它的组件？

• 2) 为什么Router 选择使用第二个空路径而不是第一个？

我想我明白为什么创建ModuleOne（以及为什么首先创建）。文档说空路径不会消耗任何 url 段，所以我猜当路由器找到一个空路径时，它会执行空路径应该做的任何事情，然后开始重新解析它找到的 url 树空路？ （不是 100% 关于这种行为）。这并不能解释为什么它忽略了加载 DefaultComponent 的空路径。

另一个奇怪的是，当第二条路径为空的路由被注释掉时：

//{ path: "", loadChildren: "./module-one/module-one.module#ModuleOne" },

我们只剩下一个空路径去DefaultComponent，当导航到/two时，该路径永远不会被触发，即使另一个空路径被触发。文档中是否有一些我没有注意到的明显内容？

这里是 StackBlitz，看看我在说什么https://stackblitz.com/edit/angular-gitter-o5tttb

我在Router 中启用了跟踪，这是我知道创建了哪些模块/组件的方式。

Answer 1

当你导航到two时，路由器开始一一处理路由。所以从第一个开始：

{ path: "", component: DefaultComponent },

它匹配空字符串总是匹配。然后剩下的段是two，路由器尝试查找当前处理的路由是否有路径为two的子路由。该路由没有任何子路由，因此路由器将其丢弃。

然后它过渡到第二条路线：

{ path: "", loadChildren: "./module-one/module-one.module#ModuleOne" },

再次，它是一个空字符串路由，所以它匹配。现在，为了让路由器检查是否有任何子路由与剩余的分段two 匹配，它需要获取该路由。一旦模块被获取，它应该被编译和实例化，因为它使用RouterModule.forChild(moduleOneRoutes) 定义了新的路由。创建模块后，路由器会获取路由并发现只有一条路由具有空路径，并且它与剩余的段 two 不匹配。路由被拒绝。

然后进入第三条路线：

{ path: "two", loadChildren: "./module-two/module-two.module#ModuleTwo" }

它与段完全匹配，因此它获取模块并实例化它带来的组件。