angular4學習筆記整理（二）angular4的路由使用

 

這章說一下angular的路由

先說angular路由怎麼引入，一開始new出來的angular項目它路由幫你配好了，但看要看app.module.ts裏面

1.首先最上面要引入路由模塊

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

 

2.而後在ngModule裏面加點東西

 

 

3.這個routeConfig須要本身定義，類型Routes，裏面就是angular路由配置

const routeConfig: Routes = [
  {path: '' , component : HomeComponent},
]

 

固然路由配置也是能夠抽出來的

路由配置簡單介紹

1.經常使用跳轉

const routeConfig: Routes = [
  {path: '' , component : HomeComponent}, //path爲''首頁便是
  {path: 'chat',component: ChatComponent,},//訪問首頁地址+/chat    即能訪問到chat組件
  {path: 'au/:id',component: AuComponent},//路由param傳參
  {path: '**',component: Code404Component} //不能匹配的路由由 ** 匹配
]

 

其中第三個路由傳參的接收方組件想要拿到參數就須要多加點
1.首先引入

import {ActivatedRoute, Params} from '@angular/router';

 

2.並在constructor裏注入這個路由服務

constructor(private routeInfo: ActivatedRoute) { }

 

3.獲取param參數

其中有2種方式獲取param
第一種是snapshot 參數快照

ngOnInit() {
    //constructor建立時會只建立一次ngOnInit，因此this.routeInfo.snapshot.params['id']的值會不變
    this.productId = this.routeInfo.snapshot.params['id'];
  }

 

但有一個問題
若是已經請求 localhost:4200/au/6 後，再請求 localhost:4200/au/8 ，至關於同路由跳轉只是參數不一樣，那麼第二次拿到的param數字仍是第一次的6
緣由

constructor建立時會只建立一次ngOnInit，因此this.routeInfo.snapshot.params['id']的值會不變

因此更多的獲取參數更推薦第二種參數訂閱的方式

ngOnInit() {
    this.routeInfo.params.subscribe((params: Params) => this.productId = params.id);
}

 

怎麼跳參數都是對的用第二種

子路由

只是一層路由明顯知足不了開發需求，能夠再配置子路由

 {
    path: 'product',
    component: ProductComponent,
    children: [
      {
        path: 'childA', component: ChildAComponent
      },
      {
        path: 'childB', component: ChildBComponent
      }
    ]
  }

 

可是子路由光這樣仍是不行·
在父組件html里加跳到子路由的按鈕時

<a [routerLink]="['./childA']" >銷售員A</a>
<a [routerLink]="['./childB']" >銷售員B</a>

 

注意這裏不能加/ 由於斜槓指向根路徑， ./才指向相對路徑

重定向路由

使用 redirectTo

const routes: Routes = [{
  path: '',
  redirectTo: 'home/6',
  pathMatch: 'full' 
}]

 

輔助路由

就是一個插座,輔助路由經過不一樣的outlet配置，讓頁面的router-outlet標籤，顯示不一樣內容
路由配置

const routes: Routes = [{//輔助路由指向ChatComponent組件，插座名稱aux
  path: 'chat',
  component: ChatComponent,
  outlet: 'aux'
}]

 

引用插座的html代碼

<a [routerLink]="[{outlets:{primary:'home/2',aux:'chat'}}]" ></a>
<a [routerLink]="[{outlets:{aux:null}}]" ></a><!--不引用輔助路由-->
<router-outlet></router-outlet> <!--插件內容顯示的地方-->

 

應該會有人問第一行的primary幹嗎的
輔助路由的改變只會改變插座的內容，不影響主路由
好比本來路徑是
http://localhost:4200/home/0
如今若是[routerLink]="[{outlets:{aux:'chat'}}]"的a標籤被點擊，改變的只是輔助路由，路徑會變爲
http://localhost:4200/home/0(aux:chat)
只有加上primary:'home/2'，主路由纔會一塊兒變，變成http://localhost:4200/home/2(aux:chat)
同主路由間跳來跳去想把輔助路由幹掉，用第二行便可

路由守衛

只有用戶已經登錄或者擁有某些權限纔可進入的路由
canActive
1.寫一個守衛類，繼承 CanActivate 接口

import {CanActivate} from '@angular/router';
export class LoginGuard implements CanActivate {
canActivate() {
  let loginedIn: boolean = Math.random() < 0.5;
    if (!loginedIn) {
      console.log('用戶未登錄');
    }
    return loginedIn;
  }
}

 

這是CanDeactivate 與canActivate不一樣的是它要離開某個組件就須要保護那個組件，創建也要注入那個組件

export class UnsaveGuard implements CanDeactivate<ProductComponent>{
canDeactivate (component: ProductComponent) {
  return window.confirm('是否離開');
}

 

這兩個返回都應該是boolean型
2.在路由配置里加配置
canActivate 在路由配置時能夠配置一個數組，angular會一次調用數組中的項，一旦某個返回false，則會終止登錄操做

{
path: 'product',
component: ProductComponent,
canActivate: [loginGuard],
canDeactivate: [UnsaveGuard]
}

 

服務里加上該服務

@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [LoginGuard, UnsaveGuard],
exports: [RouterModule]
})

 

路由守衛 很是重要 。再給個我網上找的參考文章
http://blog.csdn.net/qq451354/article/details/54017466