angular中路由跳转并传值的四种方式

一、路由传值

  1.   步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2&name=xiaoming
  1. <div class="z-shebei-box1 x-mysh-p"  style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
  2.      <a [routerLink]="['/devicepay']" [queryParams]="{id:key}">
  3.          <ul>
  4.            <li>{{item}}</li>
  5.          </ul>
  6.      </a>
  7.  </div>

步骤2 接收传过来的参数 注意：接收时通过 queryParams 进行接收

  1. // 首先：引入 import {ActivatedRoute} from '@angular/router'
  2. // 再：声明：constructor(public route:ActivatedRoute) { }
  3. // 接收： // 接收传过来的值
  4.     this.route.queryParams.subscribe((res)=>{
  5.       console.log(res)
  6.     })

二、动态路由传值

这种情况是在浏览器中可以显示对应的参数 这种的是斜杆 localhost:8080/news/id=2&name=xiaoming
步骤1 在路由中进行配置

  1. { path: 'devicepay/:id',component:DevicepayComponent},

步骤2 在html界面中进行跳转

  1. <div class="z-shebei-box1 x-mysh-p"  style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
  2.       <a [routerLink]="['/devicepay/',key]">
  3.            <ul>
  4.             <li>{{item}}</li>
  5.          </ul>
  6.       </a>
  7.   </div>

步骤3 在另一界面中接收传过来的参数 注意 ：动态路由接收时使用的是 params

  1. // 引入 import {ActivatedRoute} from '@angular/router'
  2. // 再：声明：constructor(public route:ActivatedRoute) { }
  3. // 接收： // 接收传过来的值
  4.     this.route.params.subscribe((res)=>{
  5.       console.log(res)
  6.     })

三、动态js进行跳转

主要在方法对象中使用

步骤1 html 中 注意里面传入的key值是 循环中 获取的索引值

  1. <button (click)='gotoDevicePay(key)'>跳转到支付界面</button>

步骤2 路由文件中写入的格式如下

  1. { path: 'devicepay',component:DevicepayComponent},

步骤3 js中 进行路由跳转

  1. //先引入
  2. import { Router} from '@angular/router'
  3. //再声明
  4. constructor( public router:Router) { }
  6. //定义点击事件
  7. gotoDevicePay(key):void{
  8.     //跳转路径 实现的是动态跳转数据
  9.     this.router.navigate(['/devicepay/'],{queryParams:{id:key}})
  10.   }

四、通过get方式可以传入多个参数到下一界面

步骤1 引入 NavigationExtras

  1. import { Router ,NavigationExtras} from '@angular/router';

步骤2. 定义一个 goNewsContent 方法执行跳转 ， 用 NavigationExtras

  1. goNewsContent(){
  2.     let navigationExtras: NavigationExtras = {
  3.     queryParams: { 'session_id': '123' },
  4.     fragment: 'anchor'
  5.     };
  6.     this.router.navigate(['/news'],navigationExtras);
  7. }

步骤3. 获取 传过来的值

  1. constructor(private route: ActivatedRoute) {
  2.    console.log(this.route.queryParams);
  3. }

参考：https://www.cnblogs.com/yangxuanxuan/p/11104263.html