Force "reloading" page when navigate to same route with different params


#1

Hello,

I have a Component linked to a route with an id param:
{ path: 'te/:id', component: AComponent },

If I add a link from page AComponent with param “a” to a page AComponent with param “b” (same component, just change param), the method “ngAfterViewInit” and “ngAfterContentInit” are not called.

First question: is it a normal behavior ?
Second question: is it a way to force “reloading” page (an go through ngAfterViewInit and ngAfterContentInit) ?

Thanks !
Serge


#2

I’m not sure what are you trying to achieve, but if you want to run a function whenever a user navigates from page A to page B or from Page B to page A, you can do something like:

import { Page } from 'ui/page'

export class ComponentA { 
 constructor(private page: Page) {
  //when user navigates to this component
  this.page.on("navigatedTo", () => {
  //Do Something
 });
 }
}

http://docs.nativescript.org/angular/core-concepts/angular-navigation.html

http://docs.nativescript.org/api-reference/classes/ui_page.page.html#on


#3

Page is reused in nativescript-angular, so the ng lifecycles doesn’t always match.

See this issue
https://github.com/NativeScript/nativescript-angular/issues/374


#4

Thanks for your answer but I find the solution! It"s a pure angular question: In angular you can choose to reload page (ie recreate the component) when paramters changes, but it is not the default behavior (default behavior is to keep component to improve performance).

For more information you can take a look at this links:



https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

https://angular.io/api/router/RouteReuseStrategy

Serge


ListView does not refresh/update when a new value is added
#5

You can also just reload the params using forEach:

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.route.params
    .forEach(params => {
// This will be triggered every time the params change
// Add your code to reload here. i.e.
      const tech = params['tech'];
      const keyword = params['keyword'];

      this.searchArticles(tech, keyword);
    });
}

#6

@sebawita
Won’t that break with the page-outlet-router?

https://docs.nativescript.org/core-concepts/angular-navigation#passing-parameter


#7

As far as I remember, this should still work.


#8

It doesn’t seem to work with NS RouterExtensions to me …


#9

Hi @TheOnlyMatt,
Can you recreate your example in play.nativescript.org?
I can have a look at the code.