Angular中如何实现嵌套路由。

需求，一个Angular App，根路由包含三个组件，home, product, about。 product组件下有两个子路由product-list和product-detail。如何实现这个需求呢？

首先定义路由文件：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { HelpComponent } from './help/help.component';
import { AbcComponent } from './home/abc/abc.component';
import { DefComponent } from './home/def/def.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    
  },
  {
    path: 'about',
    component: AboutComponent,
  },
  {
    path: 'product',
    component: HelpComponent,
    children: [
      {
        path: 'product-list',
        component: AbcComponent,
      },
      {
        path: 'product-detail',
        component: DefComponent,
      },
    ],
  },
];

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

然后在template文件中定义导航链接：

<!-- app.component.html -->
<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/product">Product</a>
</nav>
<router-outlet></router-outlet>

最后在根模块中引入路由模块：

// app.component.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ProductComponent } from './product.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    ProductComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

在product组件的模板文件中定义子路由导航：

<!-- product.component.html -->
<nav>
  <a routerLink="/product/product-list">Product List</a>
  <a routerLink="/product/product-detail">Product Detail</a>
</nav>
<router-outlet></router-outlet>

Philip

angular-router-nested_routes

Angular中如何实现嵌套路由。