ionic 跳转传参的另一种方式

ionic 这一中跳转传参,不用在页面上写跳转路径
在这里插入图片描述
首先现在跳转页面引入 import { Router } from ‘@angular/router’;
在这里插入图片描述
然后再写上 public activated: ActivatedRoute,
在这里插入图片描述
最后就是传参了:
假设我这里有一些数据,我要把 commodity 里的herd 里面的类容传到 /inventory-save(路径) 页面中;
先定义一个 click()点击事件,
在这里插入图片描述
然后点击的时候传参
this.router.navigate([’/inventory-save’], navigate([这里面是路径])
在这里插入图片描述

/*========================html================*/
<div class="top dx">
    <div class="top_left" style="justify-content:center;">{{count}}类商品</div>
    <div class="top_right" (click)="baocun()" >保存</div>
 </div>
/*========================js================*/
public commodity = [
    {
      id: 1,
      img: '//img30.360buyimg.com/mobilecms/s280x280_jfs/t1/87272/22/7379/151344/5dfaeccbE38fd6c73/454a86a719afdad7.jpg.webp',
      herd: '3M 汽车 砖石 水晶 硬蜡 PN39528',
      day: '水晶,颜色:玫红',
      stock: '570',
      number: 0,
      judeg: 1
    }, {
      id: 2,
      img: '//img30.360buyimg.com/mobilecms/s280x280_jfs/t1/87272/22/7379/151344/5dfaeccbE38fd6c73/454a86a719afdad7.jpg.webp',
      herd: '沙拉公主 奥地利水晶项链 天使项链',
      day: '水晶,颜色:玫红',
      stock: '570',
      number: 0,
      judeg: 1
    }, {
      id: 3,
      img: '//img30.360buyimg.com/mobilecms/s280x280_jfs/t1/87272/22/7379/151344/5dfaeccbE38fd6c73/454a86a719afdad7.jpg.webp',
      herd: '3M 汽车 砖石 水晶 硬蜡 PN39528',
      day: '水晶,颜色:玫红',
      stock: '570',
      number: 0,
      judeg: 1
    }
  ]
/*点击保存传参到/inventory-save'页面
	queryParams里面就是要穿的参数,
*/
 baocun() {
    this.router.navigate(['/inventory-save'], {
      queryParams: {
        page: this.commodity[0].herd,
      }
    });
  }

/inventory-save 接收页面
引入 import { ActivatedRoute, Params } from ‘@angular/router’;
在这里插入图片描述
然后再:** constructor(public activeRoute: ActivatedRoute) {}**
在这里插入图片描述
最后接收传过来的值:

 // 定义变量接收参数
  public zong_gong = {};
ngOnInit() {
    this.activeRoute.queryParams.subscribe((params: Params) => {
      this.zong_gong = params;
      console.log(this.zong_gong);
    });
  }
发布了15 篇原创文章 · 获赞 7 · 访问量 199
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览