傾家蕩產買入文乃股！！！文乃天外飛仙，唯我文乃（破嗓）！！
任你們前十二集蹦來蹦去，我只打我的助攻，在最佳的時機，最佳的地點用最佳的方式開始絕地反殺，大招清場，五殺團滅，直接MVP到手。文乃同學的操作真是天秀666……這些都是因為巧合導致而不是文乃醬是腹黑。話說回來——天降系真是絕殺幼馴染啊。不過天降系不是最猛的，最猛的是天降幼馴！015小草莓你“死”的好慘啊！
開始正片吧，例如現在我們有兩個組件，一個是新聞列表list.component；另一個是新聞新聞詳情detail.component。根據組件的功能我們應該是從新聞列表頁面進入詳情頁面，根據列表中條目的文章ID請求數據調用詳細的文章信息然后展示給用戶查看。我們如何在列表頁把文章ID傳給詳情頁呢？
共有四種方式。確切說是分成兩大類共四小類，我給大類定義的名字是主動跳轉傳值和觸發跳轉傳值，兩種方式都包含有get跳轉和動態路由兩種方式來實現，這樣也就就是四種了下面一一道來：
前提是我們在app-routing.module.ts中已經添加了相關的路由條目，嗯！我們先不考慮RouterModule.forRoot()和RouterModule.forChild()的區別和應用場景，為了方便理解記憶路由傳值，在這里這里面我們把所有的路由信息都寫到了app-routing.module.ts中
// 導入路由模塊及組件信息
import { Routes , RouterModule } from '@angular/router';
import { ListComponent } from '....';
import { DetailComponent } from '....';
// 定義路由信息
const routes: Routes = [
{path: 'list', component: ListComponent},
{path: 'detail', component: DetailComponent},
{path: '**', redirectTo: 'home'},
];
// 應用路由
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
一，主動跳轉傳值
1：Get方式
newslist.component.html中使用ngfor調用列表，使用routerLink屬性來定義跳轉路由地址，使用queryParams屬性來定義要傳遞的值。注意值的形式，別搞錯了。不管是字符串還是變量都要有" "來包裹，而字符串還要再多一層' '
<!-- newslist.component.html -->
<ul class="list">
<li *ngFor="let item of items">
<!-- 使用queryParams屬性來傳遞值 -->
<a [routerLink]="['/detail']" [queryParams]="{ id:item.ID }">{{item.title}}</a>
</li>
</ul>
detail.component中使用ActivatedRoute模塊的queryParams方法來接受傳遞過來的數據，需要注意的queryParams是一個RXJS對象需要用subscribe訂閱來調用返回值。
/* detail.component.ts
要先導入ActiveRoute模塊 */
import { ActivatedRoute } from "@angular/router"
// 構造函數中實例化
constructor( public route:ActivatedRoute ){ }
// 接收到傳遞過來的值
this.route.queryParams.subscribe( val:any => {
console.log('文章ID：',val.id )
})
2：動態路由
部分代碼已經省略，可以比較前面的代碼。首先需要在路由文件中定義路由信息，這也是get方式和動態路由的區別之一，get方式不用設置路由信息，而動態路由顧名思義是需要設置路由信息的。
路由信息中添加動態路由：
// app-routing.module.ts
// 省略部分見開頭的代碼 注意形式是 '/:',別寫錯
{path: 'detail/:id', component: ListComponent},
然后是路由跳轉，不使用queryParams屬性跳轉，而是routerLink屬性傳值的時候內部的數組中，這個第二項附帶上要傳的值(數組下標1)。
<!-- newslist.component.html -->
<a [routerLink]="['/detail' , item.id]">{{item.title}}</a>
最后接受發送的數據，這里還是使用ActivatedRoute模塊，但是不再使用queryParams方法，而是用params方法，而且params也是一個RXJS對象同樣還是要用subscribe訂閱來調用返回值。
// detail.component.ts
this.route.params.subscribe( val:any => {
console.log('文章ID：',val )
})
// * 注意前面傳來的值是對象還是字符串
二：觸發跳轉傳值
1：動態路由
前面所說的例子都是依附于html<a>標簽，言外之意就是需要用戶來點擊才能觸發路由跳轉，如果使用場景中不需要用戶點擊而是根據條件判斷結果自動跳轉，例如判斷用戶是否已經登錄，如果是自動登錄狀態就讓用戶自動跳轉到指定頁面，如果沒有就自動跳轉到登錄頁面。這個情況下使用angular的routerLink就會有點力不從心了。
這個時候我們就可以通過封裝JS跳轉的方法，在判斷條件滿足時，自動觸發該方法即可。既然是觸發跳轉的路由跳轉，那么肯定還是和我們的路由信息有關聯，還是在app-routing.module.ts中添加路由信息：
// app-routing.module.ts
// 省略部分見開頭的代碼 注意形式是 '/:',別寫錯
{path: 'detail/:id', component: ListComponent},
我們使用Router模塊。注意這個地方別寫錯了。Routes是路由信息配置的類，ActivatedRoute模塊是接受傳來數據時用的模塊，RouterModule是路由模塊，Router模塊是JS路由跳轉用的模塊，有點亂……沒關系通過一個表格，有助于我們記憶。
// 引入Router 模塊
import { Router } from '@angular/router';
使用Router的navigate方法來進行跳轉，傳遞格式和動態路由一樣。
// 構造函數中實例化
constructor(private router: Router) {}
// 帶傳值的JS跳轉，注意傳值的方式，和動態路由一樣。
this.router.navigate(['/detail', item.id]);
// 沒有傳值的跳轉
this.router.navigate(['/home']);
}
}
2：get跳轉
這和get方式跳轉一樣，不需要路由信息的支持，直接傳遞就可以。不過我們需要額外引入一個NavigationExtras的類來定義傳遞的信息。
//引入NavigationExtras類
import { Router ,NavigationExtras} from '@angular/router';
定義傳參，get跳轉傳值：
let navigationExtras: NavigationExtras = {
queryParams: { 'id': item.id },
fragment: 'anchor'
};
this.router.navigate(['/detail'],navigationExtras);
后記：其實我覺得這篇文章叫路由跳轉方式比較貼切，嘿嘿……
