Angular路由器是一個可選的外部Angular ngModule，通過配置和使用路由器，頁面可以根據(jù)url來切換不同的視圖以達到導航的目地。

首先，要在根module中導入RouterModule模塊并配置routers。

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

@ngModule({

imports: [

?RouterModule.forRoot([{

? ? path: 'page1',

? ?component: Page1Component

}])

]

})

當url地址以/page1結(jié)尾時，頁面的視圖就會顯示Page1Component的模板，但是顯示在哪里呢？

在根組件的模板中使用路由指令RouterOutlet標簽，目標視圖就會顯示在這個標簽內(nèi)。

...

template: `

? ? ? ? <router-outlet></router-outlet>

`

...

但是我們的鏈接呢？如果直接使用<a href="/page1"></a>顯然無法和路由關聯(lián)起來，這個時候我們就要使用另外一個路由指令RouterLink。

...

template: `

? ? ? ? <a routerLink="/page1">to page1</a>

? ? ? ? <router-outlet></router-outlet>

`

...