Ionic中组件间数据共享：category.ts向register.ts传递category_id

嘿，这事儿不难，我给你一步步说清楚怎么实现：

步骤1：在跳转时传递参数 #

在category.ts的gotoRegister方法里，调用navCtrl.push的时候，第二个参数就是要传递的数据对象，把你的category_id放进去就行：

修改后的category.ts代码：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { RegisterPage } from '../register/register'; 
import { LoginPage } from '../login/login'; 

@Component({ 
  templateUrl: 'category.html' 
}) 
export class CategoryPage { 
  public category_id = 2; 
  category: Object[]; 

  constructor(public navCtrl: NavController) { 
    this.category = [
      {cid:1,cname:'Doctor',img:'../../assets/imgs/doctor.png'},
      {cid:2,cname:'Phsiotherapist',img:'../../assets/imgs/physiotherapist.png'},
      {cid:3,cname:'Medical Store',img:'../../assets/imgs/medicalStore.png'}
    ]; 
  } 

  gotoRegister() { 
    // 这里添加参数传递逻辑
    this.navCtrl.push(RegisterPage, {
      category_id: this.category_id
    }); 
  } 
}

步骤2：在RegisterPage中接收参数 #

要获取传递过来的参数，你需要用到Ionic的NavParams服务。先引入它，再在构造函数中注入，最后用get方法取出category_id即可：

修改后的register.ts代码：

import { Component} from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; // 引入NavParams
import { ApiService } from '../../services/api.service'; 
import { LoginPage } from '../login/login'; 

@Component({ 
  templateUrl: 'register.html' 
}) 
export class RegisterPage { 
  public user:Object = {}; 
  public category_id: number; // 定义变量存储接收的参数

  constructor(
    public navCtrl: NavController,
    private navParams: NavParams, // 注入NavParams服务
    private validatorService: ValidatorService,
    private apiService: ApiService
  ) { 
    // 在构造函数中获取传递过来的category_id
    this.category_id = this.navParams.get('category_id');
  } 

  registerUser() { 
    console.log(this.category_id); // 现在就能正常打印出传递过来的数值了
  } 
}

额外小提示 #

如果你的category_id是动态变化的（比如点击不同分类项时更新），只需要在点击事件里先更新this.category_id的值，再调用gotoRegister方法就行，参数传递的逻辑不需要改动。

内容的提问来源于stack exchange，提问作者chvc