angular路由模塊（二）

上一章寫的是如何建立一個簡單的路由，這同樣咱們來看看如何建立一個路由模塊。angular的思想就是（模塊，組件，子組件.....）。

咱們在src/app目錄下建立一個跟路由模塊app-routing.module.ts文件。

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

import { RouterModule, Routes }  from '@angualr/router';//引入路由模塊

import { CrisisListComponent } from './crisis-list.component';

import { HeroListComponent } from './hero-list.component';

//建立路由數組

const routes:Routes = [

{ path: 'crisis-center', component: CrisisListComponent },

{ path: 'heroes', component: HeroListComponent },

{ path: '', redirectTo: '/heroes', pathMatch: 'full' },

];

@ngModule({

imports:[RouterModule.forRoot(routes)],//路由配置

exports:[RouterModule] //必定要記得這個導出，否則會報錯，

})

 

export class AppRoutingModule {

 

}

//把app.module.ts文件中的路由部分刪除，添加app-routing.module.ts模塊

import { AppRoutingModule }  from './app-routing.module';

@NgModule({

imports:[AppRoutngModule]

})

這樣就完成了，angular的路由模塊化，可是這個模塊仍是在根路由，並無說配置子路由，下節再說子路由實現。