Ionic2: Unsubscribe Event to Avoid Duplicate Entri

Question

I've followed this tutorial which outlines adding monitoring beacons in an Ionic 2 application. I have it working great: when the view loads, it initializes and begins listening for beacons:

home.ts

    ionViewDidLoad() {
        this.platform.ready().then(() => {
            this.beaconProvider.initialise().then((isInitialised) => {
                if (isInitialised) {
                    this.listenToBeaconEvents();
                }
            });
        });
    } 

This calls the listenToBeaconEvents function which populates a list in the view with all of the beacons:

home.ts

    listenToBeaconEvents() {
        this.events.subscribe(‘didRangeBeaconsInRegion’, (data) => {

            // update the UI with the beacon list
            this.zone.run(() => {

                this.beacons = [];

                let beaconList = data.beacons;
                beaconList.forEach((beacon) => {
                    let beaconObject = new BeaconModel(beacon);
                    this.beacons.push(beaconObject);
                });

            });

        });
    }

I'm able to stop ranging using this.beaconProvider.stopRanging() that calls a function from the below function:

beacon-provider.ts

    stopRanging() {
        if (this.platform.is('cordova')) {
            // stop ranging
            this.ibeacon.stopRangingBeaconsInRegion(this.region)
                .then(
                () => {
                    console.log('Stopped Ranging');
                },
                error => {
                    console.error('Failed to stop monitoring: ', error);
                }
                );
        }
    }

The problem I'm having is this - in the original tutorial the beacon list is shown at the root, there's no other navigation. I've moved it to a different view, and if the user exits and re-enters the view, it re-initializes and loads everything, resulting in duplicate list entries.

I've tried creating a function within beacon-provider.ts to call before the view exits, but I can't figure out how to keep the subscriptions/events from duplicating.

I've tried this.delegate.didRangeBeaconsInRegion().unsubscribe(), and some other variations but they all result in runtime errors.

Answer 1

In your case you are using Ionic's Events API which has its own unsubscribe(topic, handler) function.

In your component, whenever you need to unsubscribe, you should call this with the same topic:

this.events.unsubscribe(‘didRangeBeaconsInRegion’);

This will remove all handlers you may have registered for the didRangeBeaconsInRegion.

If you want to unsubscribe one specific function, you will have to have registered a named handler which you can send with unsubscribe.

this.events.unsubscribe(‘didRangeBeaconsInRegion’,this.mySubscribedHandler);

And your home.ts would look like:

 mySubscribedHandler:any = (data) => {

            // update the UI with the beacon list
            this.zone.run(() => {

                this.beacons = [];

                let beaconList = data.beacons;
                beaconList.forEach((beacon) => {
                    let beaconObject = new BeaconModel(beacon);
                    this.beacons.push(beaconObject);
                });

            });

        }

    listenToBeaconEvents() {
        this.events.subscribe(‘didRangeBeaconsInRegion’,this.mySubscribedHandler);
    }