Angular not reload if route to same param

Question

I want to reload a page article/:id every time a button is clicked, Angular is able to reload the page whenever the :id changed, but if route to same :id, then it ignores the changes.

export class DocumentComponent {
    constructor(
        private activatedRoute: ActivatedRoute,
        private router: Router
    ) {}

    ngOnInit() {
        this.routeSubscription = this.activatedRoute.params.subscribe(params => {
            this.reloadPage(+params['id']);
        });
    }

    clickReload(id: number) {
        this.router.onSameUrlNavigation = 'reload';
        this.router.navigate(['article', id]);
    }
}

When the params changed, the observable params will be triggered, and the reloadPage() is executed. However, when I try to reload the same params, Angular ignore it, how can I reload the same param?

article/123 --> article/456 [ok]
article/111 --> article/222 [ok]
article/666 --> article/666 [not ok, how?]

I try to use the onSameUrlNavigation, but it is not working... Am I doing something wrong?

Why exactly do you want it to reload BTW? activatedRoute.params is a BehaviorSubject which only pushes a new value when it has changed. Since there's no change in the id it won't trigger a change. — SiddAjmera
– SiddAjmera, Commented Aug 29, 2018 at 7:21
Possible duplicate of How to reload the current route with the angular 2 router — Sanoj_V
– Sanoj_V, Commented Aug 29, 2018 at 7:28
Possible duplicate of How to reload the current route with the angular 2 router — Amit Chigadani
– Amit Chigadani, Commented Aug 29, 2018 at 7:33

Rohit Sharma · Accepted Answer · 2018-08-29 08:01:01Z

3

You need to check the id if it is same then just reload the page. You can do like it:

clickReload(id: number) {
    if(id == this.activatedRoute.snapshot.params.id) {
        window.location.reload();    //if id is same then just reload the page
    } else {
        this.router.navigate(['article', id]);
    }
}

edited Aug 29, 2018 at 8:01

answered Aug 29, 2018 at 7:23

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shanil Arjuna · Accepted Answer · 2018-08-29 07:44:16Z

2

You can just add as below and remove the validation.. just the navigation is enough.

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload',
    enableTracing: false
  })],
  exports: [RouterModule]
})

example :

https://stackblitz.com/edit/mlc-onsameurlnavigation-activatedroute?file=app%2Fapp-routing.module.ts

answered Aug 29, 2018 at 7:44

Shanil Arjuna

1,13510 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular not reload if route to same param

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related