如何在Angular 2中設置基本路由？

Question

我想了解非常基本的路由在docs的Angular 2中是如何工作的，我不明白。

我建立了一個PLUNK我有一個導航欄。目標是讓'關於'按鈕將用戶帶到about組件。這些組件已經在龐大。

我最初寫了這裏，但它歸結爲一個事實，我不明白爲什麼我的路由不工作（我覺得我正確設置它）：

<a routerLink="/home-page" routerLinkActive="active">Home</a> 

該代碼單擊時不會執行任何操作。我的路由定義是這樣的：

import { Routes } from '@angular/router'; 
import { AboutPage } from './about-page.component.ts' 
import { HomePage } from './home-page.component.ts' 

export const appRoutes: Routes = [ 
    { path: 'home-page', component: HomePage }, 
    { path: 'about-page', component: AboutPage } 
]; 

而且，不管出於什麼原因，把<router-outlet></router-outlet>在navbar.components.ts顯示路由器的出口不會發現並拋出。另外，我99％確定基礎href設置正確，因此可能不需要檢查。

總之，如何讓我的路線工作？

Answer 1

1）加入所有.ts文件成src文件夾

---

2）需要導入 RouterModule，然後用 forRoot（）方法使用它如圖 應用.routing.ts

import { Routes,RouterModule } from '@angular/router'; 
export const routing = RouterModule.forRoot(appRoutes); 

---

3）現在，您需要導入 路由在 @ NgModule的進口元數據。

@NgModule({ 
    imports: [ BrowserModule,routing ], 
    ... 
}) 

---

4）最後，加入 默認路由在 app.routing.ts

export const appRoutes: Routes = [ 
    {path:'',redirectTo:'home-page',pathMatch: 'full'}, 
    ... 
    ... 
    ]; 

---

工作演示：http://plnkr.co/edit/mEvR1vU8EEkctNikaNAi?p=preview