倾家荡产买入文乃股！！！文乃天外飞仙，唯我文乃（破嗓）！！
任你们前十二集蹦来蹦去，我只打我的助攻，在最佳的时机，最佳的地点用最佳的方式开始绝地反杀，大招清场，五杀团灭，直接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);
后记：其实我觉得这篇文章叫路由跳转方式比较贴切，嘿嘿……
