核心ts文件

app.module.ts

下方的HomeModule是新建的模块，也是要被加载的路由模块。

import {BrowserModule} from '@angular/platform-browser';
import {enableProdMode, NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {registerLocaleData} from '@angular/common';
import en from '@angular/common/locales/en';
import {AppRoutingModule} from './app.routing';
import {LoginModule} from './views/login/login.module';
import {NbMessageService} from './services/message/nb-message-service';
import {HomeModule} from './views/home/home.module';registerLocaleData(en);
enableProdMode();@NgModule({declarations: [AppComponent],imports: [BrowserModule,NgZorroAntdModule,FormsModule,HttpClientModule,BrowserAnimationsModule,AppRoutingModule,LoginModule,HomeModule],providers: [{provide: NZ_I18N, useValue: zh_CN},NbMessageService],bootstrap: [AppComponent]
})
export class AppModule {
}

app.routing.ts

下方的

{path: 'home',   // 主页component: HomeComponent
}

是要新建的home模块，要路由的模块。

import {NgModule} from '@angular/core';
import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
import {LoginComponent} from './views/login/login.component';
import {HomeComponent} from './views/home/home.component';export const ROOT_ROUTERS: Routes = [{path: 'login',   // 登陆页面component: LoginComponent},{path: 'home',   // 主页component: HomeComponent},{path: 'notFoundPage', // 找不到页面loadChildren: './components/not-found/nb-not-found.module#NbNotFoundModule'},{path: '**',           // 找不到页面redirectTo: 'notFoundPage',pathMatch: 'full'}]
;@NgModule({imports: [RouterModule.forRoot(ROOT_ROUTERS, {useHash: true, preloadingStrategy: PreloadAllModules})],exports: [RouterModule]
})
export class AppRoutingModule {
}

开始路由

路由动作可以绑定在html中，也可以绑定在ts中。

ts灵活，介绍一下，不推荐html中写，耦合度太高。

跳转

因为home和login是一个层级的，无父子路由关系，直接跳转就可以了：

this.router.navigate(['/home']);

 申明子路由

比如我想要在HomeComponent中使用子路由

在home的模块下注册子路由

    RouterModule.forChild([{path: '',component: HomeComponent}])

配置子路由

完成