angularjs2 -----路由

Angular 路由器是一個可選的外部 Angular NgModule，名叫RouterModule。 路由器包含了多種服務(RouterModule)、多種指令(RouterOutlet、RouterLink、RouterLinkActive)、 和一套配置(Routes)。

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

RouterModule.forRoot([
  {
    path: 'heroes',
    component: HeroesComponent
  }
])

• component: 導航到此路由時，路由器需要創建的組件（HeroesComponent）。

• path: 路由器會用它來匹配瀏覽器地址欄中的地址，如heroes。
  

• 如果我們把路徑/heroes粘貼到瀏覽器的地址欄，路由器會匹配到'Heroes'路由，並顯示HeroesComponent組件。 但問題是，該把它顯示在哪呢？

  我們必須告訴它位置，所以我們把<router-outlet>標籤添加到模板的底部。 RouterOutlet是RouterModule提供的指令之一。 當我們在應用中導航時，路由器就把激活的組件顯示在<router-outlet>裏面。

  
  

 <a routerLink="/heroes">Heroes</a>
   <router-outlet></router-outlet>

錨標籤中的[routerLink]綁定。 我們把RouterLink指令（ROUTER_DIRECTIVES中的另一個指令）綁定到一個字符串。 它將告訴路由器，當用戶點擊這個鏈接時，應該導航到哪裏。

多個模塊只要在RouterModule添加path,在導航裏裏添加相應的錨點，代碼示例：

app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { RouterModule }   from '@angular/router';
import { AppComponent }        from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { DashboardComponent }  from './dashboard.component';
import { HeroesComponent }     from './heroes.component';
import { HeroService }         from './hero.service';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'detail/:id',
        component: HeroDetailComponent
      },
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

這個是最基本的路由配置。

app.component.ts

<nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>