核心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
}])
配置子路由
完成