angular - 如果包含子路由 Angular，是否可能只路由到子路由？

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，您可以使用 guards。

您将需要一个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 .