Remove page completely

Ionic Framework ionic-v3
#1

How to remove a page completely?

I have used this:
this.navCtrl.removeView(this.viewCtrl);

this
this.viewCtrl.dismiss();

and this:

  const index = this.viewCtrl.index;
    this.navCtrl.remove(index);

with all the above page disappear from the view but I need to completely destroy that page from (stack/navigation or whatever you call it) so I can invoke that page again.

What actually I am doing is, I have an event listener, on this event fire I am showing that page, With all above methods that page disappear from the view but when event is fired again I see page appears multiple times. it opens as many times it was opened last time +1.

So if that page was open 5 time before, it will show 6 times again on next event fire.

EDIT:

ok I did something and i think its not that issue: so for testing I added this script:

  let that = this;
  setInterval(function () {
    let getviews = that.navCtrl.getViews();
    console.log(getviews);
  }, 2000);

it shows me correctly pages in view when close it , but when event is fire again , it open that page multiple times

#2

Can you provide the exact code you are using to do this? I think it will make the conversation go better.

#3

it is sockets issue, my client is making multiple connections when new view comes in stack, so I tried below approach , I am not sure if this is proper way to , in below code what I am trying to achieve is when another view comes in stack previous view should close the socket connection and then in ionViewWillEnter it will make connection again with socket and ionViewWillLeave disconnect, But still I think its not properly working , it is still able to make multiple connections.I have very long code so I will give a pseduo code here:

provider Socket.ts:

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import 'rxjs/add/operator/map';

@Injectable()
export class Socket {
  socket: SocketIOClient.Socket;
  constructor() {}
  connect() {
      this.socket.connect();
    }
  disconnect() {
      this.socket.disconnect();
    }
  on(eventName: any, callback: any) {...};
  emit(eventName: any, data: any) {...};

I have two pages:

ChatPage.ts

import { Socket } from './../../providers/socket/socket';
.....
 constructor(...socket:Socket....)
ionViewWillLeave()
{
  this.socket.disconnect();
}
ionViewWillEnter()
{
 this.socket.connect();
}

CallPage.ts

 constructor(...socket:Socket....)
ionViewWillLeave()
{
  this.socket.disconnect();
}
ionViewWillEnter()
{
 this.socket.connect();
}

when I enter ChatPage I call socket.connectIO from service and from there when I enter CallPage it close the connection in ChatPage and make a new one in CallPage

is there any better way to achieve this? I dont want a client to have more than one connection, is it possible to share one socket connection between both pages?

Thanks

#4

Maybe somebody else can make more sense out of this, but I can’t do much with this pseudocode.

#5

I don’t now if this works for you.

I have in my html this

<ion-nav id="nav" main #content [root]="rootPage"></ion-nav>

In my script i have this

rootPage: any;
// use this to switch
this.rootPage = chatPage;
this.rootPage = callPage;

I use this in a split pane layout but perhaps it works for you too.

I have the didLoad Event in my page and it runs every time is Switch the page so I think the other Events will too.