Force reload of previous page to update dynamic data when navigating back

[sorakthun]

Since Nativescript caches current page when navigating forward, navigating back means that any changes made in the new page won't be recognized by the current page. How then do I force a reload of the cached page when navigating back?

To solve this, I try to create a pseudo page (a new layout and some animation) but that's not at all practical since ngOnInit is never called again as discussed in issue #374. It would be very inconvenient to make user do pull to refresh constantly.

[glorindel]

please can you write how you resolve this problem?

[jdchmiel]

Lol, is this the dead end on the internet for trying to solve this problem? I found animations do not restart when using the back button, not do dynamically generated items get regenerated. As a newbie to this, I was thinking something other than ngOnInit existed??

[jogboms]

@jdchmiel I have been battling to solve this issue for days now since I noticed it. No luck yet.

[jdchmiel]

I have a had a little bit of luck in creating a watcher to do some work. The CSS repeating animation on the page is not reloading though, it stays at the initial non-animated state when I use the back button. Navigating to this page does retrigger the animation to start, but I really want the back button to trigger it as well. Some simplified code to get the idea:

import { Page } from "ui/page";...
public constructor( private page:Page ) { this.page.addEventListener("navigatedTo", () => { //stuff here fires to refresh the content on my page }...

However, I am pretty sure this is really incorrect as some logging has shown things firing up to 3 times :(

[jogboms]

@jdchmiel I'm currently using angular so I ended up putting the animating object into a router-outlet within the page since that doesn't get cached.

[tscislo]

I also have a problem with this. Does anyone found a solution for this?

[mayureshjadhav]

Hello Guys,

I found the solution #617 here. Please have a look.

[satyam-dev]

We can use the loaded event from Page class provided by Nativescript.
There are certain events from the Page that we can listen which mimics basic lifecycle hooks such as viewDidLoad() viewWillAppear in iOS.

Basic example when using Nativescript with Angular is -

The event unloaded is fired when current page is being destroyed

    this.page.on('unloaded', () => {
      // do something when the current page is destroyed
    });

The event loaded is fired when current page is being loaded

    this.page.on('loaded', () => {
      // This is called every-time the current page is in the top of the navigation stack
    });

Therefore you can use loaded event to refresh the previous screen when they are loaded again.

Hope that helps.

[tahir-jamil]

still not working

[JamesVal]

I was trying to do this using the Page.loadedEvent inside of ngOnInit(). Just to note - if the component is routed to, then ngOnInit() and Page.loadedEvent will happen together when first loading the component. If the component is NOT routed to (i.e., a component sitting in another component) then Page.loadedEvent will NOT run the first time the component is loaded (it does run if you navigate backward, though).

That being said - I did put Page.loadedEvent inside of ngOnInit() and it'll work as long as you're* fetching the data through a service at that point. In my scenario though, I am actually loading the data from a route resolver - which does NOT work with this method. The resolver finishes after the Page.loadedEvent if you are navigating backward (if you navigate forward, it works fine). Just a heads up for anyone out there that still runs into weird* things with this.