0

Para usar la siguiente función, primero se debe importar AlertController de la libreria:

import { AlertController } from '@ionic/angular';

Paso siguiente es inyectarlo en el constructor de un componente cualquiera:

export class myPage implements OnInit {

    ...data
    constructor(private alertCtrl: AlertController){}
    ...data

}

Acto seguido, tenemos el siguiente metodo de la clase que he creado:

async getAlert(
  title, message, cancelText, okText, cancelCallback, okCallback, params
){

  const defaultTranslatedOptions = {
    cancelText: "Cancelar",
    okText: "Rechazar"
  };

  const alert = await this.alertCtrl.create({
    header: title,
    message: message,
    buttons: [
      {
        text: cancelText ? cancelText : defaultTranslatedOptions.cancelText,
        role: 'cancel',
        cssClass: 'secondary',
        handler: function(){
          cancelCallback(...params[0]);
        }
      }, {
        text: okText ? okText : defaultTranslatedOptions.okText,
        handler: function(){
          okCallback(...params[1]);
        }
      }
    ]
  });

  return await alert.present();

}

Este metodo lo que permite es crear una alerta en pantalla con dos botones de manera dinamica, (segun los datos que se le pasen al metodo), incluyendo datos como el titulo de la alerta, la descripción de la alerta, los nombres que tendran los botones, las funciones que estos ejecutaran al pulsar un boton u otro y los argumentos que se le pasara a cada función.

El problema es que si llamo a este metodo dentro de otro metodo de la MISMA clase y le paso como argumentos 5 y 6, metodos de la misma clase, obtengo en cualquiera de los dos metodos ejecutados por el metodo getAlert() que this es undefined:

requestSendingOptions(){

  const roomData = {
    room: scrambleStringByCharset(ALLOWED_ROOMID_CHARS, 7) + ";" + Date.now,
    name: this.userData.username,
    type_user: this.userData.type_user
  };

  this.getAlert(
    '¿Qué deseas hacer?',
    '¿Deseas crear un nuevo grupo o añadir los invitados a un grupo existente?',
    'Crear nuevo grupo', 'Añadir a grupo existente',
    this.createNewRoom,
    this.toRoomSelection,
    [
      ['new-room', roomData],
      []
    ]
  );

}

Ahora bien... los callbacks que son ejecutados por medio del metodo getAlert, que a su vez este es ejecutado por el metodo requestSendingOptions de la misma clase, es irrelevante realmente ya que asi el metodo tenga o no tenga algo dentro, cuando le meto un console.log() para ver el contenido de this segun la opcion que yo haya elegido en el alert a cada uno de los dos metodos usados, en ambas me dice que this es undefined.

1
  • ummm se me olvido colocar la etiqueta ionic xd
    – Layer
    el 5 oct. 2019 a las 7:46

1 respuesta 1

0

He encontrado una solución muy sencilla... y es utilizar bind:

async getAlert(
  title, message, cancelText, okText, cancelCallback, okCallback, params
){

  const defaultTranslatedOptions = {
    cancelText: "Cancelar",
    okText: "Rechazar"
  };

  const alert = await this.alertCtrl.create({
    header: title,
    message: message,
    buttons: [
      {
        text: cancelText ? cancelText : defaultTranslatedOptions.cancelText,
        role: 'cancel',
        cssClass: 'secondary',
        handler: ()=>{
          cancelCallback.bind(this, ...params[0])();
        }
      }, {
        text: okText ? okText : defaultTranslatedOptions.okText,
        handler: ()=>{
          okCallback.bind(this, ...params[1])();
        }
      }
    ]
  });

  return await alert.present();

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.