Angular 关于多个空路径的角度路由器逻辑的混淆
在学习角度路由器的工作原理时,我遇到了一些我不太理解的令人费解的行为。如果您有这样的routes config设置(惰性加载的模块都有自己的route config,其中只包含一个空路径和一个组件):Angular 关于多个空路径的角度路由器逻辑的混淆,angular,router,Angular,Router,在学习角度路由器的工作原理时,我遇到了一些我不太理解的令人费解的行为。如果您有这样的routes config设置(惰性加载的模块都有自己的route config,其中只包含一个空路径和一个组件): export const appRoutes: Routes = [ { path: "", component: DefaultComponent }, { path: "", loadChildren: "./module-one/module-one.module#ModuleO
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
,然后将创建moduleWO
,最后将创建moduleWO
创建的第二个组件。但是,ModuleOne
应该创建的组件没有创建
- 1) 为什么要创建模块One,为什么要先创建
- 2) 为什么不
ModuleOne
创建它的组件
- 2) 为什么
路由器
选择第二条空路径而不是第一条
我想我理解为什么创建了ModuleOne
(以及为什么首先创建)。文档说空路径不使用任何url段,所以我猜当路由器找到空路径时,它会执行空路径应该执行的任何操作,然后从找到空路径的位置开始重新解析url树?(不是百分之百地关注这种行为)。但这并不能解释为什么它忽略加载DefaultComponent
的空路径
另一件奇怪的事情是,当带有空路径的第二条路由被注释掉时:
//{ path: "", loadChildren: "./module-one/module-one.module#ModuleOne" },
我们只剩下一条通向DefaultComponent
的空路径,当导航到/two
时,该路径永远不会被触发,即使另一条空路径被触发。文件中有什么明显的东西我没有注意到吗
这是一场闪电战,看看我在说什么
我在路由器
中启用了跟踪,这是我知道创建了哪些模块/组件的方式。当您导航到两个
时,路由器开始逐个处理路由。所以从第一个开始:
{ path: "", component: DefaultComponent },
它匹配为空字符串始终匹配。然后剩余的段是two
,路由器尝试查找当前处理路由是否有路径为two
的子路由。此路由没有任何子路由,因此路由器将丢弃它
然后转换到第二条路线:
{ path: "", loadChildren: "./module-one/module-one.module#ModuleOne" },
同样,它是一个空字符串路由,因此它匹配。现在,为了让路由器检查是否有任何子路由将匹配剩余的段two
,它需要获取该路由。获取模块后,应使用RouterModule.forChild(modulenoroutes)
对其进行编译和实例化,因为它定义了新的路由。创建模块后,路由器获取路由并发现只有一条路由具有空路径,并且它与剩余的段two
不匹配。该路线被拒绝
然后进入第三条路线:
{ path: "two", loadChildren: "./module-two/module-two.module#ModuleTwo" }
它与段完全匹配,因此它获取模块并实例化它带来的组件。啊,我想我明白了!因此,它忽略第一个{path:,component:DefaultComponent},
的原因是,当处理不仅仅是“/”的路由时,它会搜索该路由的子级以查看是否有匹配项,然后基于此丢弃它,而不是当路径仅仅是“/”时,它将在{path:”上匹配,component:DefaultComponent},
,因为它不需要寻找更多的子项。是吗?@Willwsharp,是的,它想从顶级路由开始构建路由树,当组合起来时,它会消耗整个URL