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，路由器尝试查找当前处理的路由是否具有路径为two的子路由。此路由没有任何子节点，因此路由器会将其丢弃。

然后转换到第二条路线：

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

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

然后进入第三条路线：

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

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

关于多个空路径的角度路由器逻辑的混淆

1 个答案: