Angular5学习笔记 路由配置

 

由于angular-cli脚手架的关系，因此配置路由能够经过命令行来建立路由文件

本来建立一个angular项目的命令是ng new 项目名，就能够了，但这样建立出来的项目是没有路由文件的。

若是须要带上路由文件，只须要在本来的基础上，在后面加上--routing

ng new 项目名 –-routing 

 

还有一种配置路由的方式：

首先经过ng g module app-routing --flat --module=app，建立一个模块

接着将Routes,RouterModule引入

import { Routes, RouterModule } from '@angular/router';

而后加上路由词典

 

const routes: Routes = [
  { path: 'path', component: NewsComponent },
];

再接着是在@NgModule修饰符下改为

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})

最后就是将导出类名，改为对应的名字

export class AppRoutingModule { }

最后一步：在页面入口（app.component.html）里加上<router-outlet></router-outlet>

 

--flat ：这是让这个模块独立在app目录下

--module=app ：将路由模块在app.module.ts里面注入