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的路由模块化,但是这个模块还是在根路由,并没有说配置子路由,下节再说子路由实现。