Angular电商后台面板路由问题：子组件路由路径异常

问题说明 #

开发电商后台管理面板时，已完成仪表盘、头部和侧边导航布局，但侧边导航组件内的子页面路由存在层级错误：

• 当前color-stone组件URL为http://localhost:4200/general-master/color-stone/
• 点击跳转后add-color-stone的URL变为http://localhost:4200/add-color-stone，不符合期望的http://localhost:4200/general-master/color-stone/add-color-stone

项目文件结构 #

src
 |->app
     |-layouts
          |-blank
          |-full
              |-header
              |-sidenavigation
     |->pages
          |->general-master
                 |->color-stone
                           |->add-color-stone

相关代码 #

color-stone.component.html #

<div class="row ">
    <div class="col-md-12">
        <h3>Color Stone</h3>
        <button class="add-product-button" (click)="navigateToAddColorStone()">Add Product</button>
    </div>
</div>

color-stone.component.ts #

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-color-stone',
  templateUrl: './color-stone.component.html',
  styleUrls: ['./color-stone.component.scss']
})
export class ColorStoneComponent {

  constructor(private router: Router) {}

    navigateToAddColorStone() {
        this.router.navigate(['../add-color-stone']);
    }

}

color-stone.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../../material.module';

// icons
import { TablerIconsModule } from 'angular-tabler-icons';
import * as TablerIcons from 'angular-tabler-icons/icons';


import { MatNativeDateModule } from '@angular/material/core';
import { ColorStoneRoutes } from './color-stone.routing';
import { AddColorStoneComponent } from './add-color-stone/add-color-stone.component';
import { ColorStoneComponent } from './color-stone.component';


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ColorStoneRoutes),
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    TablerIconsModule.pick(TablerIcons),
    MatNativeDateModule,
  ],
  declarations: [
 ColorStoneComponent,
 AddColorStoneComponent,
   
  ],
})
export class ColorStoneModule {}

general-master.routing.ts #

import { Routes } from '@angular/router';
import { ColorStoneComponent } from './color-stone/color-stone.component';
   
export const GeneralMasterRoutes: Routes = [
  {
    path: '',
    children: [
      
      {
        path: 'color-stone',
        component: ColorStoneComponent,
      },
     
    ],
  },
];

解决方案 #

1. 配置子路由结构 #

创建/完善color-stone.routing.ts，将add-color-stone设置为color-stone的子路由：

import { Routes } from '@angular/router';
import { ColorStoneComponent } from './color-stone.component';
import { AddColorStoneComponent } from './add-color-stone/add-color-stone.component';

export const ColorStoneRoutes: Routes = [
  {
    path: '',
    component: ColorStoneComponent,
    children: [
      // 定义子路由，路径相对于父路由
      { path: 'add-color-stone', component: AddColorStoneComponent }
    ]
  }
];

2. 修正通用主模块路由 #

修改general-master.routing.ts，通过懒加载方式加载ColorStoneModule，确保路由层级正确：

import { Routes } from '@angular/router';

export const GeneralMasterRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'color-stone',
        // 懒加载color-stone模块
        loadChildren: () => import('./color-stone/color-stone.module').then(m => m.ColorStoneModule)
      }
    ]
  }
];

3. 修复组件导航逻辑 #

修改color-stone.component.ts，使用相对路由结合当前激活路由进行导航，避免路径错误：

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-color-stone',
  templateUrl: './color-stone.component.html',
  styleUrls: ['./color-stone.component.scss']
})
export class ColorStoneComponent {

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  navigateToAddColorStone() {
    // 基于当前激活路由，导航到子路径add-color-stone
    this.router.navigate(['add-color-stone'], { relativeTo: this.activatedRoute });
  }

}

4. 添加子组件渲染出口 #

在color-stone.component.html中添加<router-outlet>，用于渲染子路由组件：

<div class="row ">
    <div class="col-md-12">
        <h3>Color Stone</h3>
        <button class="add-product-button" (click)="navigateToAddColorStone()">Add Product</button>
    </div>
</div>
<!-- 子组件将渲染在此处 -->
<router-outlet></router-outlet>

完成以上修改后，点击"Add Product"按钮，URL将变为期望的http://localhost:4200/general-master/color-stone/add-color-stone，子组件也会正确渲染在color-stone页面内。

内容的提问来源于stack exchange，提问作者Nilima Bose