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

Question

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

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

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

然后，在SettingPage上，而不是直接访问将调用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");
        }
    });
  }
  ...
}

您可能需要对这段代码做一些调整，但它应该能够正常工作。