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>