如何在 Ionic 3 中将数据传递到另一个页面 - TypeScript

在 Ionic 3 中，我们经常需要在不同的页面之间传递数据。本文将介绍在 TypeScript 中如何传递数据。

通过 NavParams 传递数据

Ionic 3 提供了一个 NavParams 服务来传递数据。

在源页面中，我们可以使用 NavParams 的 push 方法来传递数据:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  goToSecondPage() {
    // 传递参数到第二页
    this.navCtrl.push(SecondPage, {
      name: 'John',
      age: 30,
      gender: 'Male'
    });
  }

}

在目标页面中，我们可以使用 NavParams 的 get 方法来获取传递过来的数据：

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
  selector: 'page-second',
  templateUrl: 'second.html'
})
export class SecondPage {
  name: string;
  age: number;
  gender: string;

  constructor(public navParams: NavParams) {
    // 获取从首页传过来的参数
    this.name = navParams.get('name');
    this.age = navParams.get('age');
    this.gender = navParams.get('gender');
  }
}

通过构造函数传递数据

我们还可以使用构造函数来传递数据。这种方式比 NavParams 更直接、更简单。

在源页面中，我们可以在构造函数中传递数据：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  goToSecondPage() {
    // 传递参数到第二页
    this.navCtrl.push(SecondPage, {
      name: 'John',
      age: 30,
      gender: 'Male'
    });
  }

}

在目标页面中，我们可以在构造函数中获取传递过来的数据：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-second',
  templateUrl: 'second.html'
})
export class SecondPage {
  name: string;
  age: number;
  gender: string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // 获取从首页传过来的参数
    this.name = navParams.get('name');
    this.age = navParams.get('age');
    this.gender = navParams.get('gender');
  }
}

通过服务传递数据

除了 NavParams 和构造函数，我们还可以使用服务来传递数据。这种方式比较灵活，可以在多个页面之间共享数据。

首先，我们定义一个 DataService，用来存储我们的数据：

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  name: string;
  age: number;
  gender: string;
}

然后，在源页面中注入 DataService，保存数据：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public dataService: DataService) {}

  goToSecondPage() {
    // 保存参数到 DataService 中
    this.dataService.name = 'John';
    this.dataService.age = 30;
    this.dataService.gender = 'Male';

    this.navCtrl.push(SecondPage);
  }

}

在目标页面中，我们也注入 DataService，然后就可以访问保存在其中的数据了：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'page-second',
  templateUrl: 'second.html'
})
export class SecondPage {
  name: string;
  age: number;
  gender: string;

  constructor(public navCtrl: NavController, public dataService: DataService) {
    // 获取从 DataService 中保存的数据
    this.name = dataService.name;
    this.age = dataService.age;
    this.gender = dataService.gender;
  }
}

这样，我们就通过服务在不同的页面之间传递了数据。

总结

在 Ionic 3 中传递数据，我们可以使用 NavParams、构造函数和服务等方式，具体如何选择，根据实际场景来确定。无论采用哪种方式，我们都可以轻松地在不同的页面之间共享数据。