1. 程式人生 > >angular4.x 路由巢狀

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>