Angular 14如何移除嵌套模块URL中的多余路径

要实现移除URL中的single-post和update前缀，让路径直接使用文章ID，需要调整路由配置和导航逻辑，以下是具体步骤：

1. 调整路由配置（核心修改） #

由于查看、更新两个模块需要共享同一个/:id路径，我们可以通过动态加载模块+query参数区分的方式实现需求，可选搭配路由守卫做参数校验。

修改posts-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes, ActivatedRouteSnapshot } from '@angular/router';
import { ModuleGuard } from './module.guard'; // 后续可选创建守卫

const routes: Routes = [
  { 
    path: ':id', 
    canActivate: [ModuleGuard], // 可选：用于验证参数合法性
    loadChildren: (route: ActivatedRouteSnapshot) => {
      // 根据query参数的mode值决定加载对应模块
      const mode = route.queryParams['mode'];
      if (mode === 'update') {
        return import('./update/update.module').then(m => m.UpdateModule);
      } else {
        return import('./read-single-post/read-single-post.module').then(m => m.ReadSinglePostModule);
      }
    }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PostsRoutingModule { }

创建路由守卫（可选） #

如果需要验证ID有效性或mode参数合法性，创建module.guard.ts：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class ModuleGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 示例：验证ID是否存在（可根据业务逻辑调整）
    const id = route.paramMap.get('id');
    if (!id) return false;
    
    // 验证mode参数可选值
    const mode = route.queryParams['mode'];
    return !mode || ['view', 'update'].includes(mode);
  }
}

2. 更新导航代码 #

修改按钮点击时的导航逻辑，移除single-post/和update/前缀，添加mode参数区分模块：

查看按钮导航 #

this.route.navigate([`${id}`], {
  queryParams: { mode: 'view' }
});

更新按钮导航 #

this.route.navigate([`${id}`], {
  queryParams: { mode: 'update' }
});

3. 优化URL（可选） #

你原来的URL中同时包含路径参数和重复的query参数id，可以去掉query中的id，直接从路径参数获取：

// 查看按钮
this.route.navigate([`${id}`], { queryParams: { mode: 'view' } });

// 更新按钮
this.route.navigate([`${id}`], { queryParams: { mode: 'update' } });

在目标组件中获取ID和模式：

const postId = this.route.snapshot.paramMap.get('id');
const currentMode = this.route.snapshot.queryParamMap.get('mode');

4. 实现根路径级ID（可选） #

如果希望URL直接为localhost:4200/[id]（跳过pages/posts层级），将路由配置移到app-routing.module.ts：

const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
  },
  { 
    path: ':id', 
    canActivate: [ModuleGuard],
    loadChildren: (route: ActivatedRouteSnapshot) => {
      const mode = route.queryParams['mode'];
      if (mode === 'update') {
        return import('./pages/posts/update/update.module').then(m => m.UpdateModule);
      } else {
        return import('./pages/posts/read-single-post/read-single-post.module').then(m => m.ReadSinglePostModule);
      }
    }
  }
];

内容的提问来源于stack exchange，提问作者M Nouman