Call function every time you visit page (even if got there by a back button press)


#1

In iOS (and maybe android too in certain circumstances), the ‘back’ button seems to not refresh the state: if a user hits the back button to go to a previous page, that previous page does not do a new initialize.

Using NS Angular.

So, for example, ngOnInit() will not be called when a page loads after a back button is pressed:

 ngOnInit(): void {
    console.log("I'll be called when you first load the page, but NOT if you come to this page by pressing the 'back' button on another page")
  }

Same with functions in a constructor–they are not called if you get to the page by a back press on another page.

So, what do you do if you have a function you want to be called every time a user visits the page? (even if they are visiting the page from a ‘back’ tap).

There may be ways of totally refreshing the page every time, but that would not quite work for me, as there are elements of the page I want to keep the same from the previous state. In other words, I do want to take advantage of the ‘back’ button functionality, but I also want to be sure a function is called every page visit.

Let’s say I have a function, awesomeFunction(), that I want to run every time someone visits the page. The following does not work, because it will not be called if you get to the page by a back tap:

ngOnInit(){
  awesomeFunction()
}

I have tried some methods that in theory should pick up every time you navigate to a page, such as:

router.events.subscribe(event => {
      if(event instanceof NavigationStart) {
          awesomeFunction()
     }
}

and

this.location.onPopState(() => {    
   awesomeFunction()
})

But both of these are overly broad–they pick up navigating to and away from a page. They also both have odd behavior: onPopState on a page seems to be called anytime any onPopState event occurs, even if its not on that page. Same with “NavigationStart”. And there is a weird multiplier effect–each one fires the number of times it has previously been called.

There has to be a simpler way.

How can I be sure a function will be called every time a page is visited?


How to catch navigating away from page (Angular, ios)
#2

Best method seems to be to catch when a user goes to a page with ‘navigatingTo’. like so:

EDIT: after discussion here, I prefer “navigatedTo” instead of “navigatingTo”.

import { Component, OnInit } from "@angular/core";
import {Page} from "tns-core-modules/ui/page";
...
export class CoolComponent implements OnInit {
constructor(private page: Page){

}

  ngOnInit(): void {
   this.page.on('navigatedTo', (data) => {  
     console.log('navigated TO the page!')
    awesomeFunction()
   })

   this.page.on('navigatingFrom', (data) => {   /*not required for this issue but included in case helpful */
     console.log('navigating AWAY from the page')
   })

  }