CODEWITHSUNDEEP
angular
Aeseir
Aeseir

Reputation: 8414

Angular routing doesn't refresh the page

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.

Upvotes: 12

Views: 36388

Answers (5)

Melroy van den Berg
Melroy van den Berg

Reputation: 3156

My full solution using the subscribe() method, in TS with Angular:

import { Component, OnInit } from '@angular/core'
import { Params, Router } from '@angular/router'
import { ActivatedRoute } from '@angular/router'
import { Location } from '@angular/common'
import { UserService } from '../user.service'
import { User } from '../user.model'
import { Observable, of } from 'rxjs'

export class YourComponent implements OnInit {
    user$: Observable<User> = of({} as User)
    id: number | undefined = 0

    constructor(
        private router: Router,
        private route: ActivatedRoute,
        private userService: UserService,
        private location: Location
    ) {
        this.id = this.route.snapshot.params.id
        // Listen on change event for ID parameter
        this.route.params.subscribe((params: Params) => {
          this.id = params['id']
          this.loadDetails() // triggered when pressing the button
        });
    }

    ngOnInit() {
        this.loadDetails() // Initial load during page load
    }

    changePage(userId: number) {
        this.router.navigate(['user/detail', userId])
    }

    private loadDetails() {
        const id = (this.id) ? +this.id : 0 // Zero should fail
        this.user$ = this.userService.getOne(id) // Your service or API or...
    }
}

HTML template:

<button mat-raised-button type="submit" (click)="changePage(user.id)">BLabla</button>

Upvotes: 0

Aeseir
Aeseir

Reputation: 8414

Resolved the problem by implementing the following code:

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

Upvotes: 11

Jp Vinjamoori
Jp Vinjamoori

Reputation: 1271

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]);
}

Upvotes: 15

sephoro
sephoro

Reputation: 158

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']
        }
      }
    );
  }

Upvotes: 3

Kamran Khatti
Kamran Khatti

Reputation: 4127

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
  }
);

Upvotes: 1

Related Questions