angular4實戰（2） router

router

單頁面應用經過路由來去渲染不一樣的視圖，爲用戶在同一個頁面看到不一樣的場景，提供基礎服務。

在上一章節，經過新建項目以後，ngModule會自動引入路由模塊，接下來須要作的事情就是對路由模塊進行配置。爲了方便維護，單獨把路由模塊的配置拿出來，再去輸出到ngModule中。

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {LoginComponent} from './core/login/login.component';
import {NotFoundComponent} from './core/not-found/not-found.component';
import {Auth} from './core/login/login.Auth';

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'stones', loadChildren: './stones/stones.module#StonesModule', canActivate: [Auth]},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: '**', component: NotFoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [Auth]
})
export class AppRoutingModule {
}

在app組件下，暫時只引了三個組件，一個是項目啓動的默認登陸頁面，一個是404頁面，另外一個是stones組件，這個組件又會做爲一個父級的路由容器來去管理他下面的頁面。

這樣作的理由是，爲了在頁面多了以後方便管理，層級上面必定要分明，不能扁平化，全部的東西都一股腦的掛在app下面。經過引入stones路由，再讓stones路由去管理其餘的子路由是一個不錯的選擇。
項目結構以下：

（ps：項目自己一直在寫，以後可能有所改變，但思路不變，不直接經過app根節點去管理）

在路由的具體的配置方面：

{path: '', redirectTo: '/login', pathMatch: 'full'}

redirectTo表示在頁面路由爲空時（通常是剛進入項目），會重定向到login頁面。

{path: '**', component: NotFoundComponent}

路由是根據path自上而下匹配的，若是說瀏覽器中的地址上的路由變成一個不存在的值時，那麼會一直向下匹配，直到匹配到**，這個能夠匹配任意路由的配置，這也是作404頁面的原理，所以必定要把**這個配置寫在最後一行。

{path: 'stones', loadChildren: './stones/stones.module#StonesModule', canActivate: [Auth]},

路由守衛

業務需求是在沒有登陸的狀況下，是不容許跳入到下一個頁面的。這時路由守衛就派上了用場。

用CanActivate來處理導航到某路由的狀況。
用CanDeactivate來處理從當前路由離開的狀況.

最經常使用的是這兩個屬性，相似於react的enter和leave，只是描述不一樣，都是用來對進入和離開路由作限制的，它們接受一個布爾值，來是否贊成用戶在路由上作跳轉。

以一個登陸舉例，這裏引入的Auth，是一個判斷是否登陸的方法。
login.Auth.ts：

import {Injectable} from '@angular/core';
import {Router, CanActivate} from '@angular/router';
import {NotyService} from '../../service/noty/noty.service';

@Injectable()
export class Auth implements CanActivate {
  constructor(private noty: NotyService, private route: Router) {
  }

  canActivate() {
    return sessionStorage.getItem('user')
      ? true
      : (this.noty.alert({
        text: '????請登陸~~????'
      }), this.route.navigate(['/login']), false);
  }
}

直接在瀏覽器中更改stones路由，就會觸發這個函數，以此來檢測是否登陸。

本章路由到此爲止，下一章節主要講UI框架的引入及在ts中引用js插件。

項目地址：https://github.com/jiwenjiang...