How to pass a parameter from a page to a provider on ionic 3?

Question

How to pass a parameter from a page to a provider on ionic 3?

Navigation

#1 by (0 votes)

0

Hello, I would like to know if it is possible to set 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 define the ip address in the page, for example "192.168.1" and would have to pass this value to the provider, example "rest_usuario = ' link . I tried to use session but it does not work, localstorage works, but we need to restart the app again. This ip address is saved in a table in sqlite.

configuration.html

<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>

configuracao.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.ts

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

ip typescript ionic3

asked by anonymous 07.08.2018 / 16:33

1 answer

Laravel Validation Unique Audio Error on Android Virtual Machine

score 0 · Accepted Answer

Create a provider with a name of type 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);
}

Inside config.ts you call the setLink () method by passing the url as a 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);
      });
    });
  }

Do not forget to import ConstantesProvider into app.module.ts, if you are using lazyloading, import ConstantesProvider into the module in question.

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