Angular2中的路由(簡單總結)

Angular2中創建路由的4個步驟:html

一、路由配置:最好新建一個app.toutes.ts文件(能不能用ng命令新建有待調查)bootstrap

Angular2中路由要解決的是URL與頁面的對應關係(好比URL是http://localhost:4200/all-people,那麼頁面顯示的就應該是allPeople畫面,URL是http://localhost:4200/first-come,頁面顯示的就應該是firstCome畫面)。數組

在Angular2中頁面是由組件組成的(Angular2中的根模塊對應的根組件就表示了整個應用,應用也能夠說成只有一個組件,也就是一個頁面,這就是單頁面應用的由來吧),因此路由解決的是URL與組件的對應關係。app

這個須要一個數據,它用來表示url與組件的對應關係,Angular2中把這個數據叫做「路由配置」ide

// 須要從路由模塊中引入Routes類
import { Routes } from '@angular/router';
// 對於須要用url連接的組件,須要從文件中導入
import { AllPeopleComponent } from './all-people/all-people.component';
import { HomePageComponent } from './home-page/home-page.component';
// export 導出供其餘模塊導入   這是一個數組,數組中沒一個元素是一個對象,最多見的是這個對象有2個屬性,分別是path(對應url)和component(對應組件),直觀上url中輸入一個路徑,在數組中查找path,若是有對應的話就在指定區域顯示與path對應的組件。
export const rootRouterConfig: Routes = [
    {
        path: '', // http://localhost:4200
        component: HomePageComponent
    },
    {
      path: 'all-people', // http://localhost:4200/all-people
      component: AllPeopleComponent
    },
]

二、在根模塊中建立根路由模塊。url

根路由模塊包含了路由所需的使用服務,它以路由配置爲參數,調用RouterModule.forRoot()方法來建立。spa

這裏還有路由策略的問題,會在後續再補充code

// 在根模塊中導入路由配置
import { rootRouterConfig } from './app.routes'; // 注意沒有.ts
// 須要調用RouterModule.forRoot()方法
import { RouterModule } from '@angular/router';
// 建立路由模塊
const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig);
// 根路由模塊默認提供的路由策略爲PathLocationStrategy(另一個是HashLocationStrategy)。
// PathLocationStrategy路由策略須要一個base路徑,設置base路徑有2種方式,最簡單的是在index.html中設置<base>
 // 路由策略:pathLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig); 
// 路由策略:HashLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig, {useHash: true});
@NgModule({ declarations: [],
// 導入路由模塊 imports: [rootRouterModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

三、添加組件存放的區域,使用RouterOutlet指令component

這個指令就是在頁面上預留一個區域,當url改變時匹配路由配置中的path,匹配成功後就將與path對應的component加載到這個區域裏。orm

通常狀況下,這個指令是放在根組件中,但也會有子組件路由同一父組件的子組件的狀況。

<section class="container">
    <router-outlet></router-outlet>
</section>

到目前爲止,一個簡單的路由就基本配置完成了,只要在url中輸入正確的path,就能顯示對應的組件。

可是,咱們總不能跳轉頁面時還要手動輸入url吧,咱們的理想方法是經過頁面的一些操做(好比點擊事件,延遲)改變url,實現path對應的組件顯示,這就是路由跳轉。

四、路由跳轉

如上說的,路由跳轉就是爲了避免要手動改變url,最多見的就是點擊事件改變url,實現路由跳轉,顯示組件。

路由跳轉有兩種方式:指令跳轉和代碼跳轉。

指令跳轉指的是使用RouterlLink指令,該指令接收一個連接參數數組,當事件被觸發時,數組中的全部元素與路由配置中的path接收的數組中的元素進行一一對比,全都相等時得以匹配。

RouterLink有一個好的方法,能夠指定routerLinkActive = 「className」,也就是當RouterLink被激活時能夠給相應的html元素添加clas類。神奇地是,routerLinkActive能夠做用於父級元素。

        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a [routerLink]="['/all-people']">allPeople</a></li>
                <li><a [routerLink]="['/first-come']">firstCome</a></li>
                <li><a [routerLink]="['/last-leave']">lastLeave</a></li>
                <li><a [routerLink]="['/form']">newPerson</a></li>
                <li><a [routerLink]="['/bugManage']">bugManage</a></li>
            </ul>
        </div>

須要特別注意的是:RouterLink指令僅響應click事件(碼源分析之後補上),要想響應其餘(好比延遲顯示)事件,就要用到代碼跳轉。

以上是Angular2中路由的基本用法,一些細節和關鍵的步驟會在後續更新,好比URL帶參數,頁面如何取得url的值,代碼跳轉和指令跳轉的區別,路由策略的區別,子路由。。。。。

新手,有問題歡迎你們指正。。。

相關文章
相關標籤/搜索