Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/41.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_Url Routing - Fatal编程技术网

Angular 如果包含子路由,则可能仅路由到子路由?

Angular 如果包含子路由,则可能仅路由到子路由?,angular,url-routing,Angular,Url Routing,我可以想出一些方法来做到这一点,但是我觉得有一种比传入某种参数然后在另一个路由模块中搜索更简单的方法 我有我的主要应用程序路由组件,其中一个路由如下所示: {path:'single',loadChildren:()=>import('./modules/indv/indv.module')。然后(m=>m.IndvModule)}, 但是,如果没有使用子url参数,我不想路由到此模块。因此,例如,如果用户键入:/individual,url将返回默认路由,但如果用户键入/individual

我可以想出一些方法来做到这一点,但是我觉得有一种比传入某种参数然后在另一个路由模块中搜索更简单的方法

我有我的主要应用程序路由组件,其中一个路由如下所示:

{path:'single',loadChildren:()=>import('./modules/indv/indv.module')。然后(m=>m.IndvModule)},
但是,如果没有使用子url参数,我不想路由到此模块。因此,例如,如果用户键入:
/individual
,url将返回默认路由,但如果用户键入
/individual/about me
,则路由将指向该模块,并转到子路由,该子路由指向
about me
组件

我试过这样做:

{path:'single/**',loadChildren:()=>import('./modules/indv/indv.module')。然后(m=>m.IndvModule)},
认为星号会像外卡路线一样,但这不起作用


我真的在文档中找不到任何链接到这样的东西?有人对如何实现这一点有什么建议吗?

因此,经过一些研究,我得出以下结论:

如果您希望能够直接访问
虚拟
模块内的子路由,则必须在该模块中显式声明它们:

//individual.module.ts
常数路由:路由=[
{路径:'',组件:IndividualComponent},
//宣布这条路线很重要!
{path:'about me',component:AboutMeComponent},
];
并在父模块中,声明模块(即
个人
)及其所有子模块的主要路径:

//单个模块的父级
{
路径:'个人',
loadChildren:()=>import('./individual/individual.module')。然后(m=>m.IndividualModule)
},
{
路径:“个人/关于我”,
loadChildren:()=>import('./individual/individual.module')。然后(m=>m.IndividualModule)
},
现在,如果您不想访问您的路线
/individual
,您可以使用警卫

您需要一个
canLoad
防护装置,这样您就可以确保在路由路径为
/individual
的情况下不会加载或访问模块。此外,此保护必须在父模块中使用,因为您希望首先检查是否有权访问该模块并加载该模块

//can-load-individual.guard.ts
如果(分段长度===1){
//如果已访问路由“/单个路由”(无任何嵌套路由)
//停止对此模块的导航
this.router.navigate(['/']);
返回false;
}
返回true;
还需要一个
canActivate
路由,因为如果模块已经加载,您不想访问该路由(因为您转到了
individual/about me
)。这将在
单个
模块中使用

//can-activate-child.guard.ts
如果(state.url=='/individual'){
this.router.navigate(['/'])
返回false;
}
返回true;

.

您可以通过以下方式定义根级路由:

const routes: Routes = [
  { path: '', component: HelloComponent },
  { path: 'individual', loadChildren: () => import('./indv.module').then(m => m.IndvModule) } 
];
在这里,您可以看到默认组件是
HelloComponent
,而延迟加载的模块是
individual
模块。 现在,延迟加载模块的路由配置如下所示:

const childRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full'},
  { path: 'about-me', component: AboutMeComponent }
];
在这里,如果有人只是键入
individual
,则会触发到延迟加载模块的路由,但由于延迟加载模块配置只有模块的名称,Angular无法知道要加载哪个组件。 这就是Angular将延迟加载模块的路由配置与声明了
loadChildren
属性的路由配置相结合的原因。 因此,在这种情况下,组合是
单个
'
。这种组合建议重定向到“/”,在这种情况下,它等于路由到根路由配置中声明的
HelloComponent

现在,当用户键入individual/about me时,由于父子路由组合,将加载
AboutMeComponent
component

要获得更清晰的想法,请查看此stackblitz: