Angular routing doesn't refresh the page

Question

I want to be able to change data on my page based on the URL route, i.e. test/1 gets me data set 1, test/2 gets me data set 2. However if i am already on test/1 and try to navigate to test/2 (and vice versa) using router navigate, it changes the url but that's it, nothing else gets triggered.

I have following definition for my route:

const routes: Routes = [
  {
    path: 'test',
    children: [
      {
        path: ':id',
        component: TestComponent
      },
      { path: '**', redirectTo: '', pathMatch: 'full' }
    ]
  },
];

TS Component:

value: any;

constructor(private router: Router, private, private route: ActivatedRoute) { 
   this.value = this.route.snapshot.params.id;
}

goToPage(value: any) {
    this.router.navigate(['/test', value]);
}

my html component:

{{value}}

<button (click)="goToPage(1)">One</button>
<button (click)="goToPage(2)">Two</button>

I've also tried adding { onSameUrlNavigation: 'reload' } to RouterModule.forRoot, still doesn't do anything.

NOTE: Problem is not to get the parameter, the problem is the refresh of the page that has to take place to trigger all processes associated with the new parameter.

score 1 · Answer 1 · answered Aug 12 '21 at 08:23

1

For it to be able to refresh the data, this piece of code this.value = this.route.snapshot.params.id should be called in ngOnInit() in this manner:

  ngOnInit() {
    this.activatedRoute.params.subscribe(
      param => {
        this.value = param['id']
        }
      }
    );
  }

answered Aug 12 '21 at 08:23

sephoro

122
9

Yep already across that method but how does that solve refresh of the page problem? – Aeseir Aug 13 '21 at 03:50
The refreshing is addressed [here](https://stackoverflow.com/a/63612473/11156095) – sephoro Aug 13 '21 at 08:44

score 0 · Answer 2 · answered Aug 12 '21 at 08:12

0

Instead of getting params from this.value = this.route.snapshot.params.id you can subscribe the paramMap and get the id

this.route.paramMap.subscribe(
  (params: ParamMap) => {
    const id = params.get('id');

    // call your api etc to get the record against new id
  }
);

answered Aug 12 '21 at 08:12

Kamran Khatti

3,083
1
17
27

Yep already across that method but how does that solve refresh of the page problem? – Aeseir Aug 13 '21 at 03:50
@Aeseir it subscribe each time when route change and you will have a new route value, I believe I posted this answer first so you should have accept my attempt :) anyways you can upvote though – Kamran Khatti Aug 17 '21 at 07:36

score 0 · Accepted Answer · answered Aug 12 '21 at 08:29

Option 1: Listen to route changes and initialize page

constructor(private router: Router, private, private route: ActivatedRoute) {
   this.value = this.route.snapshot.params.id; // for first entry
   route.params.subscribe(val => {
     this.value = this.route.snapshot.params.id;
     // put the code to initialize the page
   });

}

Option 2: Reinitialize the page on route navigation

goToPage(value: any) {
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
    }
    this.router.onSameUrlNavigation = 'reload';
    this.router.navigate(['/test', value]);
}

score 0 · Answer 4 · answered Aug 13 '21 at 03:52

0

Resolved the problem by implementing the following code:

    this.router.navigate(['/test', value])
        .then(() => {
          window.location.reload();
        });

answered Aug 13 '21 at 03:52

Aeseir

6,726
9
51
98

Angular routing doesn't refresh the page

4 Answers4

Option 1: Listen to route changes and initialize page

Option 2: Reinitialize the page on route navigation