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>

猜你喜欢

转载自blog.csdn.net/strong90/article/details/79884925
今日推荐