Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 关于多个空路径的角度路由器逻辑的混淆_Angular_Router - Fatal编程技术网

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

Angular 关于多个空路径的角度路由器逻辑的混淆,angular,router,Angular,Router,在学习角度路由器的工作原理时,我遇到了一些我不太理解的令人费解的行为。如果您有这样的routes config设置(惰性加载的模块都有自己的route config,其中只包含一个空路径和一个组件): export const appRoutes: Routes = [ { path: "", component: DefaultComponent }, { path: "", loadChildren: "./module-one/module-one.module#ModuleO

在学习角度路由器的工作原理时,我遇到了一些我不太理解的令人费解的行为。如果您有这样的routes config设置(惰性加载的模块都有自己的route config,其中只包含一个空路径和一个组件):

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