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

转载于:https://www.cnblogs.com/chzlh/p/7615288.html