Page pop listener

Ionic Framework ionic-v3
1

Is there a way to add an event when a page does a pop to parent page?

Example:

My app consists of these pages:

devicesPage -> singleDevicePage -> editDevicePage

I need to know when the singleDevicePage pops to devicesPage so I can disconnect from the device.

I have tried using

ionViewWillLeave() {
    if( this.nav.getActive().component.name != "EditDevicePage"){
        this.bluetoothService.disconnect(this.deviceId);
    }
}

unfortunately when compiled to --prod it doesn’t recognise the page name as shown in https://github.com/driftyco/ionic/issues/8512

Would a solution be to implement my custom handler for the android back button and the back arrow on iOS/Android?

2

It’s not totally clear to me exactly what is wrong here, but I think you’re on the right path, I just don’t really understand checking the component name. The ionViewWillLeave only fires when you leave the view it’s defined on, so I can’t really understand why you’d need to know the name, just put it on the view you want to detect leaving.

3

The checking of the name was a way to know to which page I am about to go. If I were to put it just on ionViewWillLeave it would fire the

this.bluetoothService.disconnect(this.deviceId);

on every page exit, forcing my editDevicePage to reconnect to the device. Basically need it to fire only when entering the devicesPage.

4

Then something much larger is wrong, or your code is structured in some way I don’t understand, because that’s now how the nav lifecycle events work.

5

Hmm doesn’t the ionViewWillLeave() fire every time you leave your page? So when I pop the page to devicesPage and when I push to editeDevicePage, both events trigger ionViewWillLeave(). In that sense it is working but doesn’t help me with my case.

I need some way to know Im leaving for the devicesPage so I can run the bluetooth disconnect method.

7

Actually, sorry, I understand now I think. So then, if you only want to disconnect when you get back to the devices page, then put ionViewWillEnter on the devices page.

8

Thanks for the patience, I think i know what is causing the confusion,

this.nav.getActive().component.name != "EditDevicePage"

is a bit contradictive since I am checking for it while leaving the singleDevicePage, but during my testing I noticed that when pushing to EditDevicePage from singleDevicePage the ionViewWillLeave will return that the nav.getActive().component is actually EditDevicePage(the page you are pushing to) and not SingleDevicePage( the page you are about to leave).

So then, if you only want to disconnect when you get back to the devices page, then put ionViewWillEnter on the devices page.

Concerning this, I have thought about it, but I would have to send the deviceId as a parameter to the parent devicesPage via pop (not sure if they implemented that functionality). Hoped that there was a cleaner solution to handle the disconnection from the singleDevicePage.

Thanks a lot for your help rlouie!

1 Like
9

Got it, ya, makes sense, you can send that data back with the pop though. Alternatively, if you can only connect to one device at a time, you could abstract the device handling to your bluetooth service like:

@Injectable()
export class BluetoothService {
  connectedDeviceId: string;

  constructor() {}

  connect(deviceId) {
    this.connectedDeviceId = deviceId;
    bluetooth.connectionFunction(deviceId); // pseudo code for actually connecting
  }

  disconnectCurrentDevice() {
    bluetooth.disconnectionFunction(this.connectedDeviceId); // pseudo code for disconnecting
    this.connectedDeviceId = '';
  }
}
1 Like
10

Great idea! I should actually migrate the connection handling to the bluetoothService since there won’t be more than one device connected at a time.

Again, thanks a lot rlouie!