Angular 4嵌套router-outlet问题：子组件渲染位置错误

这个问题我之前也碰到过，核心是没配置好嵌套路由，让我一步步给你捋清楚怎么改：

1. 调整主路由配置（app-routing.module.ts） #

主路由只需要负责懒加载Products模块，不用管它的子路由，配置应该是这样：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的其他主路由，比如首页之类的
  {
    path: 'products',
    // 懒加载Products模块
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  }
];

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

2. 配置Products模块的嵌套路由（products-routing.module.ts） #

这一步是关键！在Products模块的路由文件里，要把ProductsComponent作为父路由的承载组件，然后把所有产品子路由放在它的children数组里：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductsComponent } from './products.component';
import { TypeProduct1Component } from './type-product1/type-product1.component';
import { TypeProduct2Component } from './type-product2/type-product2.component';

const routes: Routes = [
  {
    path: '', // 这里是空路径，对应主路由的/products路径
    component: ProductsComponent, // 这个组件里要有自己的router-outlet
    children: [
      // 子路由路径不需要加/products前缀，父路由已经处理了
      { path: 'typeproduct1', component: TypeProduct1Component },
      { path: 'typeproduct2', component: TypeProduct2Component },
      // 你其他的产品子路由都放在这里
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)], // 子模块用forChild，不要用forRoot
  exports: [RouterModule]
})
export class ProductsRoutingModule { }

3. 确保ProductsComponent模板里有router-outlet #

打开products.component.html，确认里面包含这个标签：

<!-- ProductsComponent的其他页面内容 -->
<router-outlet></router-outlet>
<!-- 产品子组件会渲染在这里 -->

4. 验证访问路径 #

现在访问http://localhost:4200/products/typeproduct1，Angular会先匹配主路由的/products，懒加载Products模块；接着匹配Products模块里的空路径（对应/products）渲染ProductsComponent；最后匹配子路由typeproduct1，把TypeProduct1Component渲染到ProductsComponent内部的router-outlet里，就不会跑到主router-outlet了。

最后提醒两个小细节：

• 确保Products模块里已经导入了ProductsRoutingModule，且declarations数组包含了ProductsComponent和所有子组件
• 子路由的路径不要重复加父路径前缀（比如别写path: '/products/typeproduct1'），否则会匹配失败

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