Search code examples
ionic2

Ionic2 - Constructor and Page Lifecycles called multiple times


I have some piece of code in my app that should be executed only once on my page, but it seems all of my page lifecycles and the constructor are called multiple times (every x seconds it's called once). I don't have that same problem on my HomePage, for example. Any ideas? The component and module are like this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ChamadaAtendimento } from './chamada-atendimento';

@NgModule({
  declarations: [
    ChamadaAtendimento,
  ],
  imports: [
    IonicPageModule.forChild(ChamadaAtendimento),
  ],
  exports: [
    ChamadaAtendimento
  ]
})
export class ChamadaAtendimentoModule {}

This is the component:

import { Component, OnInit } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { NavParams, NavController, ModalController } from 'ionic-angular';
import { ApiService } from '../../providers/api-service';
import { DialogService } from '../../providers/dialog-service';
import { AuthService } from '../../providers/auth-service';
import { HomePage } from '../home/home';
import { SetMotivoIntervalo } from '../set-motivo-intervalo/set-motivo-intervalo';
import { Platform } from "ionic-angular";
import { NativeAudio } from '@ionic-native/native-audio';

@IonicPage()
@Component({
  selector: 'page-chamada-atendimento',
  templateUrl: 'chamada-atendimento.html',
})
export class ChamadaAtendimento {

  chamada_id : number;
    area : string = "";
    atividade : string = "";
  resposta_enviada : boolean = false;

  constructor(
    navParams: NavParams,
    private nav: NavController,
    private api: ApiService,
    private dialog: DialogService,
    private auth: AuthService,
    private platform: Platform,
    private nativeAudio: NativeAudio,
    private modalCtrl: ModalController
  ) {

    this.chamada_id = navParams.data.chamada_id;
    this.area = navParams.data.area;
    this.atividade = navParams.data.atividade;

    if (this.platform.is('cordova')) {
      this.nativeAudio.preloadSimple('chamada', 'assets/sounds/Umbriel.mp3');
      this.nativeAudio.loop('chamada');
    }

  }


  ionViewWillEnter(){
    console.log("page lifecycle test");
  }


  responderChamada(resposta){

    console.log("resposta ",resposta),
    console.log("resp enviada",this.resposta_enviada);
    if(!this.resposta_enviada){

      this.resposta_enviada = true;

      if (this.platform.is('cordova')) {
        this.nativeAudio.stop('chamada');
        this.nativeAudio.unload('chamada');
      }

      if(resposta=="Intervalo"){
        const modal = this.modalCtrl.create(SetMotivoIntervalo, {chamada_id: this.chamada_id});
        modal.present();
      }else{
        this.dialog.showLoading("Enviando resposta...");
        this.api.responder_chamada(this.chamada_id, resposta).subscribe(
            () => {
            this.dialog.loading.dismiss();
            this.auth.setStatusAtual(resposta);
            if (resposta=="Atendimento"){
              this.auth.setChamada(this.chamada_id, this.area, this.atividade);
            }else{
              this.nav.setRoot(HomePage);
            }

            if(resposta=="Inativo"){
              this.dialog.showToast("Status de Operação definido como Inativo");
            }else{
              this.dialog.showToast("Resposta enviada com sucesso");
            }

            },(error) =>{
            this.dialog.loading.dismiss();
            if(error && error.length){
              this.dialog.showAlert("Erro ao responder chamada", error);
            }
            }
        );
      }

    }

  }


  encerrarAtendimento(){
    this.dialog.showLoading("Encerrando atendimento...");
    this.api.encerrar_atendimento(this.chamada_id).subscribe(
      () => {
        this.dialog.loading.dismiss();
        this.auth.setChamada(null, null, null);
        this.nav.setRoot(HomePage);
        this.dialog.showToast("Atendimento encerrado com sucesso");
      },(error) => {
        this.dialog.loading.dismiss();
        if(error && error.length){
          this.dialog.showAlert("Erro ao encerrar atendimento", error);
        }
      }
    );
  }

}

Solution

  • Got my answer: I had a setInterval on my app.component, which called a function every x seconds. Every time that function was called, it seems it alternates the component so it have to re-construct, or something like that, not sure. Anyway, the sollution for me was to clearInterval for that page. But still didn't understand quite well what happened