How to pass a parameter from a page to a Provider in Ionic 3?

Question

Good morning, I wonder if it is possible to define the ip address when consuming a web service Rest in Ionic 3, where the user could define the address and port to which the api would be. The user would set the ip address on the page , for example "192.168.1" and it would be necessary to pass this value to the previous user , example "rest_usuario = 'http://192.168. 1/Webservice/usuarios'". I tried using session but it doesn’t work, localstorage works, but you need to restart the app again. This ip address is saved to a table in sqlite.

html setting.

<form padding [formGroup]="configuracaoForm" (submit)="Enviar()" novalidate>
    <ion-item>
      <ion-label>Endereço IP</ion-label>
      <ion-input type="text" [(ngModel)]="model.ip" formControlName="ip" placeholder="Endereço IP"></ion-input>
    </ion-item>
    <br>

configuration.ts

Enviar() {
    return this.dbProvider.getDB()
      .then((db: SQLiteObject) => {
        let sql = 'select * from configuracao where endereco_ip =?',
          data = [this.model.ip];
        return db.executeSql(sql, data)
          .then((data: any) => {
            if (data.rows.length > 0) {
              let config: any[] = [];
              for (var i = 0; i < data.rows.length; i++) {
                var configuracao = data.rows.item(i);
                config.push(configuracao);
                localStorage.setItem("ip", this.model.ip)

Rest.

insereUsuario() {
    // this.endereco = window.sessionStorage.getItem('endereco');
    return new Promise(resolve => {
      this.http.get('http://' + localStorage.getItem("ip") + '/WebService/usuarios').subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }

Answer 1

Create a Preview with some name like constants.provider.ts and create get and set methods. See below:

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

@Injectable()
export class ConstantesProvider {
    private url: string;
    private link: string;
    constructor(){
      this.url = '/WebService/usuarios'; 
      this.link = '';
    }

}

public setLink(url:string){
    this.link = url;
}

public getUrl(){
    return this.link.concat(this.url);
}

Within settings.ts you call the setLink() method passing the url as parameter:

import {ConstantesProvider } from 'caminho/para/o/seu/provider';

constructor(constProvider: ConstantesProvider ){}
Enviar() {
    return this.dbProvider.getDB()
      .then((db: SQLiteObject) => {
        let sql = 'select * from configuracao where endereco_ip =?',
          data = [this.model.ip];
        return db.executeSql(sql, data)
          .then((data: any) => {
            if (data.rows.length > 0) {
              let config: any[] = [];
              for (var i = 0; i < data.rows.length; i++) {
                var configuracao = data.rows.item(i);
                config.push(configuracao);
                this.constProvider.setLink(this.model.ip)

And finally inside your Rest.ts you call the geturl method():

import {ConstantesProvider } from 'caminho/para/o/seu/provider';

constructor(constProvider: ConstantesProvider ){}

insereUsuario() {
    return new Promise(resolve => {
      this.http.get(this.constProvider.getUrl()).subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }

Don’t forget to import the ConstantesProvider within app.module.ts, if you are using lazyloading, import the ConstantesProvider within the module in question.

I recommend the use of Observables, but it is necessary to read about. I separated two links that helped me to understand. Here and here