基礎知識
1.
ほとんどのルーティング付きアプリケーションはindexにある.htmlのラベルの下に要素を追加します.
2.ルーティングライブラリのインポート
import { ROUTER_DIRECTIVES } from '@angular/router';
3.構成
このアプリケーションを開始するには、「ルーティング配列」付きprovideRouterファクトリ関数([provideRouter](routes))を使用します.
app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

const routes: RouterConfig = [
 { path: 'crisis-center', component: CrisisCenterComponent },
 { path: 'heroes', component: HeroListComponent },
 { path: 'hero/:id', component: HeroDetailComponent },
 { path: '**', component: PageNotFoundComponent }
];

export const appRouterProviders = [
 provideRouter(routes)
];

RouterConfigは、ナビゲーション方法を決定するルーティング配列です.各Routeは1つのURLのpathを1つのコンポーネントにマッピングします.
pathはスラッシュ/先頭は使用できません.ルータはURLを解析して生成します.
3番目のルーティングのidは、ルーティングパラメータのtokenである.
4番目のルーティングの**は、ルーティングがワイルドカードパスであることを表します.現在、私たちが構成したパスのいずれかに一致しない場合、ルータはswitchのdefaultに似ています.404ページを表示する必要がある場合、この機能は非常に有用である.
構成されたroutes配列をprovideRouter()関数に渡し、この関数は構成されたRouterサービスプロバイダに戻ります.
最後にappRouterProviders配列を介してこのプロバイダをmain.tsでの簡単な登録ルータ依存.メールでtsのbootstrap関数にルータのプロバイダを登録します.
main.ts

// main entry point
import { bootstrap }   from '@angular/platform-browser-dynamic';
import { AppComponent }  from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
 appRouterProviders
])
.catch(err => console.error(err));

4.
上記の構成が完了すると、URLが/heroesになると、ルータはpathがheroesのRouteに一致し、ホストビューにHeroListComponentコンポーネントが表示されます.
5.[routerLink]
私たちはラベルにはrouterLinkコマンドが追加されており、ルーティングのpath値に一度にバインドできます。にいます.
routerLinkが動的情報をバインドしたい場合は、ルーティングリンク配列を返すことができるテンプレート式にバインドできます.ルータは最終的にこの配列をURLとコンポーネントビューに解析します.
を使用して、関連するrouterLinkがアクティブになっている間に要素にCSSクラスを追加または削除するrouterLinkActiveコマンドを追加します。このコマンドは、エレメントに直接追加することも、親エレメントに直接追加することもできます。に行くこともできます
AppComponentテンプレート

template: `
 
Component Router
 
 
`,

6.ルータの状態
各ナビゲーションのライフサイクルが完了すると、ルータの現在のステータスを示すActivatedRouteからなるツリーが構築されます.現在のRouter State値にアクセスするには、アプリケーションでRouterサービスとそのrouterStateプロパティを使用します.
7.ROUTER_DIRECTIVES
RouterLink、RouterLink Active、RouterOutletはROUTER_DIRECTIVESコレクションのコマンドなので、@Componentメタデータにdirectives配列に追加する必要があります.
directives: [ROUTER_DIRECTIVES]
以上、Angular 2(RC 4)のルートとナビゲーションの資料を整理し、引き続き関連資料を補充します.