将值从服务传递到Ionic 2中的页面

时间:2016-10-15 10:55:39

标签: cordova angular typescript ionic2

我使用以下代码创建了一个服务。我编写了两个函数,一个用于使用ip和port创建本机存储,另一个用于从本机存储中获取值。

DatabaseService

export class DatabaseService {
  ...
  public ip: string;
  public port: string;
  ...
  public createConnectionInfo(ip: string, port: string) {
    NativeStorage.setItem('connectionStorage', { ip: ip, port: port })
      .then(
        () => console.log('Stored Connection Information!'), //Working
        error => console.error('Error storing connection information', error)
      );
  }
  ...
  public getConnectionInfo() {
    this.platform.ready().then(() => {
      NativeStorage.getItem('connectionStorage').then(data => {
        this.ip = data.ip; // I'm setting the ip in this public variable
        this.port = data.port;
        console.log(this.ip); //Works
      }, error => {
        this.navCtrl.push(SettingPage);
      });
    });
  }
  ...
}

SettingPage

export class SettingPage {
  connection: any;
  service: DatabaseService;
  ip: string;
  port: string;
  constructor(public navCtrl: NavController, platform: Platform, service: DatabaseService) {
    this.service = service;
    platform.ready().then(() => {
      if(true){ 
        console.log(this.service.ip+" IP FROM THE SERVICE"); \\I'm trying to get the ip from the service.
      }
    });
  }
  ...
}

我能够创建本机存储并从本机存储中检索值,但我无法将其从我的服务传递到设置页面。请指教。谢谢。我仍然试图解决这个问题。请帮忙。

我的离子信息

Cordova CLI: 6.3.1                                                                                                              
Gulp version:  CLI version 3.9.1                                                                                                
Gulp local:                                                                                                                     
Ionic Framework Version: 2.0.0-rc.1                                                                                             
Ionic CLI Version: 2.1.0                                                                                                        
Ionic App Lib Version: 2.1.0-beta.1                                                                                             
ios-deploy version: Not installed                                                                                               
ios-sim version: Not installed                                                                                                  
OS: Mac OS X El Capitan                                                                                                         
Node Version: v6.7.0                                                                                                            
Xcode version: Xcode 7.3.1 Build version 7D1014

1 个答案:

答案 0 :(得分:1)

您可以使用getConnectionInfo方法获取您的IP地址,如果您稍微调整该方法以返回承诺。像这样:

public getConnectionInfo() {
  return this.platform.ready().then(() => NativeStorage.getItem('connectionStorage'))
    .then(data => {
      this.ip = data.ip;
      this.port = data.port;
      console.log(this.ip);
      return data;
    }).catch(error => {
      this.navCtrl.push(SettingPage);
      return error;
    });
  });
}

然后在您的设置页上,而不是直接访问您将调用getConnectionInfo的值,如下所示:

export class SettingPage {
  connection: any;
  service: DatabaseService;
  ip: string;
  port: string;
  constructor(public navCtrl: NavController, platform: Platform, service: DatabaseService) {
    this.service = service;
    platform.ready().then(() => this.service.getConnectionInfo())
      .then(() =>{
        if(true){ 
          console.log(this.service.ip+" IP FROM THE SERVICE");
        }
    });
  }
  ...
}

您可能需要对此代码进行一些调整,但它应该可以正常工作。