angular4路由 - 爱码网

1 目录结构

angular4路由

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 网页中的代码放入到你的页面然后就可以运行了

效果图

angular4路由