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裏面注入