angular4路由

1  目录结构

2   app.module.ts

import { BrowserModule }from '@angular/platform-browser';

import { BrowserAnimationsModule }from '@angular/platform-browser/animations';

import { NgZorroAntdModule }from 'ng-zorro-antd';//这两个是直接使用NG-ZORRO要使用的插件

import { NgModule }from '@angular/core';

import { AppComponent }from './app.component';

import { CommserviceService}from "./commservice.service";

import { FormsModule }from '@angular/forms';

import { HttpModule }from '@angular/http';

import { RouterModule,Routes } from'@angular/router';

import { LoginComponent }from './login/login.component';

import { SettingModule }from "./setting/setting.module";

const routes: Routes = [

{path:'',redirectTo:'setting',pathMatch:'full'},//这里网上的路径都是要加/但是这里加了/后面module也加/只能跳当前路径不能跳到下一级路径

{path: 'setting',loadChildren: './setting/setting.module#SettingModule'},

{path: 'login',component:LoginComponent}

];

@NgModule({

declarations: [

AppComponent,

LoginComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule,

SettingModule, //这里注意一定要将这个module注入到app.module当中

// HttpClientModule,

// Ng2PaginationModule,

BrowserAnimationsModule,

NgZorroAntdModule.forRoot(),

RouterModule.forRoot(routes)

],

providers:[CommserviceService],

bootstrap: [AppComponent]

})

export class AppModule { }

3  setting.module.ts

import { NgModule }from '@angular/core';

import { BrowserAnimationsModule }from '@angular/platform-browser/animations';

import { CommonModule }from '@angular/common';

import { SoftproductComponent }from './softproduct/softproduct.component';

import { OthersComponent }from './others/others.component';

import { SettingComponent }from "./setting.component";

import { RouterModule,Routes } from'@angular/router';

import { NgZorroAntdModule }from "ng-zorro-antd"; //这个应该是有用到这个组件才在module中引入

import { FormsModule }from '@angular/forms';

const routes:Routes = [

{path:'setting',component:SettingComponent,

children:[

{path: '',redirectTo:'soft',pathMatch:'full'},

{path: 'soft',component:SoftproductComponent},

{path: 'other',component:OthersComponent}

]}

];//上面第一个path不用加/不然只能调到当前目录不能跳到下一级，上面的module也一样

@NgModule({

imports: [

FormsModule,

CommonModule,

RouterModule.forChild(routes),

BrowserAnimationsModule,

NgZorroAntdModule.forRoot()

],

declarations: [SettingComponent,SoftproductComponent,OthersComponent]//这里也一定要引入主目录组件SettingComponent

})

export classSettingModule { }

4  根据https://ng.ant.design/#/components/table   网页中的代码放入到你的页面然后就可以运行了

效果图