Question

我可以想到一些实现此目的的方法，但是我觉得有一种比传递某种参数然后在其他路由模块中搜索它更简单的方法...

我有我的主要应用程序路由组件，其中的一条路由如下：

{ path: 'individual', loadChildren: () => import('./modules/indv/indv.module').then(m => m.IndvModule) },

但是，如果不使用任何子url参数，我不想路由到该模块。因此，例如，如果用户键入：/individual，则该URL将仅返回默认路由，但是如果用户键入/individual/about-me，则该路由将直接进入该模块并转到子路由about-me组件。

我尝试了一些类似的方法：

 { path: 'individual/**', loadChildren: () => import('./modules/indv/indv.module').then(m => m.IndvModule) },

认为星号的作用类似于通配符路线，但这不起作用...

我在文档中也找不到链接到此类内容的东西吗？有人对如何做到这一点有任何建议吗？

Answer 1

因此，经过一些研究，这些是我得出的结论：

如果您希望能够直接访问invidiual模块中的子路由，则必须在该模块中明确声明它们：

// individual.module.ts
const routes: Routes = [
 { path: '', component: IndividualComponent },
 // Declaring this route is important!
 { path: 'about-me', component: AboutMeComponent },
];

，然后在父模块中声明模块的主路由（即individual）及其所有子级：

// parent-of-individual.module.ts
{
   path: 'individual',
   loadChildren: () => import('./individual/individual.module').then(m => m.IndividualModule)
 },
 {
   path: 'individual/about-me',
   loadChildren: () => import('./individual/individual.module').then(m => m.IndividualModule)
 },

现在，如果您不希望访问路线/individual，则可以使用后卫。

您将需要一个canLoad防护，因此，如果路由路径为/individual，则可以确保不会加载或访问该模块。另外，必须在父级模块中使用此防护程序，因为您要先检查是否有权访问该模块并加载它。

// can-load-individual.guard.ts
if (segments.length === 1) {
      // If the route `/individual` (without any nested routes) has been accessed
      // stop the navigation to this module
      this.router.navigate(['/']);

      return false;
    }

    return true;

还需要一条canActivate路由，因为如果模块已经加载，则您不想访问该路由（因为您去过individual/about-me）。这将在individual模块中使用。

// can-activate-child.guard.ts
if (state.url === '/individual') {

      this.router.navigate(['/'])

      return false;
    }

    return true;

Here is a StackBlitz example。

Answer 2

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

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属性的路由配置相结合的原因。因此，在这种情况下，组合为individual和''。这种组合建议将redirectTo设置为'/'，在这种情况下，它等于路由到根路由配置中声明的HelloComponent。

现在，当用户键入personal / about-me时，由于父子路由组合，将加载AboutMeComponent组件。

要获得更清晰的主意，请看以下堆栈闪电战： https://stackblitz.com/edit/angular-m1uonf

如果包含子路径，可能仅路由到儿童吗？

2 个答案: