如何在提供程序和页面之间传递数据

Question

我正在尝试从谷歌地图提供商那里获取纬度和长度值，并将它们传递给我的列表页面，但我无法使用 NavController 做到这一点。

导入导航控制器：

import {NavController, NavParams} from 'ionic-angular';

导入的列表页：

import { ListPage } from '../pages/list/list';

构造 函数：

constructor(private navController: NavController, private navParams: NavParams)

法典：

 this.navController.push(ListPage, {
    lat: lat1, lon: lon1
});

一切看起来都很好，但我明白了

没有导航控制器的提供程序

错误。

Answer 1

无法从@Injectable()构造函数调用NavController。

1( 从构造函数中删除private navController: NavController。

2( 添加import { App } from 'ionic-angular';和

constructor(public connectivityService: Connectivity, public app: App)

3( 添加此功能

get navCtrl(): NavController {
   return this.app.getActiveNav();
}

4(

this.navCtrl.push(ListPage, { lat: lat1, lon: lon1 });

5( 在列表页

constructor(public navParams: NavParams){
let lat = this.navParams.get('lat'); 
let lon = this.navParams.get('lon'); 
console.log(lat,lon); 
}

Answer 2

更新：

哎呀，我没有注意到您正在使用服务。巴勃罗·阿尔巴拉德霍的权利。您不能在服务中使用 NavController，因为这可能会破坏导航堆栈或使其真正混乱。

一种四处走动的方法是按照巴勃罗的建议加载App。

另一种方法是使用 Ionic 提供的Events在视图之间进行通信。我个人喜欢它，因为这给了我更多的自由，而不是将服务仅绑定到一个视图。

https://ionicframework.com/docs/api/util/Events/

源语言

你走在正确的道路上。您所需要的只是导入NavParams

import { NavController, NavParams } from 'ionic-angular';

构造器：

constructor(private navController: NavController, private navParams: NavParams)

所以在您的情况下，当您推送视图时

this.navController.push(ListPage, {
    lat: lat1, lon: lon1
});

现在您可以访问参数：

this.lat = navParams.get('lat');
this.lot = navParams.get('lot');