angular4.x 路由嵌套

最新推荐文章于 2025-06-18 09:00:00 发布

原创最新推荐文章于 2025-06-18 09:00:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#路由嵌套 #angular4 #路由

Angular 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了Angular应用程序中的路由配置方法，包括如何设置二级和三级路由，以及如何使用 loadChildren 属性加载懒加载模块。通过实例展示了如何在组件中使用 router-outlet 来显示不同路径对应的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为非root-route中的代码：

部分代码地址：https://github.com/oceankai/angular4-demo/tree/master/tab-demo

1、需要嵌套的二级路由

const routes: Routes = [
  { path: '', redirectTo: 'home' },
  { 
    path: 'home', 
    component: HomeComponent,
    children:[
      { path: 'first', loadChildren: 'app/pages/tab-demo/first/first.module#FirstModule' },
      { path: 'second', loadChildren: 'app/pages/tab-demo/second/second.module#SecondModule' },
      { path: 'third', loadChildren: 'app/pages/tab-demo/third/third.module#ThirdModule' }
    ]
  }
];

2、第三级路由

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FirstComponent } from './first.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: FirstComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [FirstComponent],
  exports: [
    RouterModule
  ]
})
export class FirstModule { }