Angular 6 - Navigation to Child Route Refreshes Whole Page

Angular 6 - navigation to child route refreshes whole page

So I found a working solution, which while not very elegant, it... works. In my parent component I created a method like this one:

constructor(public route: ActivatedRoute, private router: Router) {
    this.loading = true;
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
    // get data
}

navigateToChild(param3: string) {
    this.router.navigate([param3], { relativeTo: this.route });
}

And in the parent template, I did this:

<a (click)="navigateToChild(paramFromServer)">
    <b>Navigate</b>
</a>

No more refreshes for this one.

Thank you for your help everyone.

Angular 6 same router.navigate causes refresh when called from another component

Finally figured out what was causing the refresh. The button with the (click) handler that was causing the refresh was sitting inside a <form> tag. Whenever the click function was called which did the router.navigate it caused a form submission which seems to be the cause

Angular 6 : Cannot load child route on page load

If you are using lazy loading you MUST NOT include lazy loaded module as import (nor you can use TS import from that module) because it will be loaded along importing module.

planet_hunter takes a lot of credit here for spotting your imports.

Angular - Navigate to current same URL with component reload not the whole page

I have found this workaround method since the onSameUrlNavigation property in Angular 5.1 is not what I need.

I just need to override shouldReuseRoute, so added an exception for the component route that I want to refresh, if the current and future route are equal view.

And also I can navigate to other routes without problems, even for navigate from Angular Material sidenav.

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
};

---

Update:

For those they want to use the new onSameUrlNavigation property in Angular 5.1 you can refer to this blog:

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

---

Related Topics