angular4.x 路由嵌套

以下为非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 { }

在需要引出的html中导入

< router-outlet></ router-outlet>