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

Question

I created a service with the following code. I wrote two functions one for creating the native storage with ip and port and the next one is for getting the values from the native storage.

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.
      }
    });
  }
  ...
}

I was able to create the native storage and also retrieved the values from the native storage but i couldn't pass that from my service to the setting page. Please advise. Thank you. I'm still trying to get this solved. Please help.

My Ionic Info

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

Answer 1

You could use the getConnectionInfo method, to get your ip address if you tweak that method a bit to return a promise. Something like this:

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;
    });
  });
}

Then on your SettingPage instead of accessing directly the value you would call the getConnectionInfo , like this:

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");
        }
    });
  }
  ...
}

You might need to do some tweaking to this code, but it should work as it is.