关于多个空路径的 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将被创建，最后SecondComponent是ModuleTwo将创建将被创建。但是，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，路由器尝试查找当前正在处理的路由是否有带有 path 的子路由two。此路由没有任何子路由，因此路由器将其丢弃。

然后它转换到第二条路线：

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

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

然后进入第三条路线：

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

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