下方的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 { }
下方的
{ 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']);