Angular Component reloading whenever clicking fragment

Question

I have an static angular component with fragment URL whenever click on the fragment link component every time loading. How to avoid loading angular component each time

 http://localhost:53130/sample/url#A
 http://localhost:53130/sample/url#B

<li><a [routerLink]='"."' [fragment]="'A'">A</a></li>
<li><a [routerLink]='"."' [fragment]="'B'">B</a></li>

Is this solution for your problem: https://www.bennadel.com/blog/3545-enabling-the-second-click-of-a-routerlink-fragment-using-onsameurlnavigation-reload-in-angular-7-1-3.htm — Samanthika Rajapaksa, Jul 27 '21 at 15:01
@SamanthikaRajapaksa i have tried but not working. First time loading the component it's working but when we go to some other route and comeback again it's not working — Arun Kumar, Jul 27 '21 at 15:11
@Brian const routes: Routes = [{ path: '', component: ParentComponent, children: [{ path: '', component: childrenComponent }] }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) — Arun Kumar, Jul 27 '21 at 15:33

score 1 · Answer 1 · answered Jul 27 '21 at 15:48

1

Replace [routerLink]='"."' with [routerLink]="[]".

Although you don't need routerLink if you don't want to navigate to a different route. You could just replace routerLink and fragment with href="#A".

answered Jul 27 '21 at 15:48

funkizer

4,626
1
18
20

score 0 · Answer 2 · answered Jul 27 '21 at 16:13

Based on some good information here and here, you may need to re-evaluate your use of RouterModule.forChild in your core routing file, app-routing.module.ts.

Perhaps you can try editing your app-routing.modules.ts file to contain the following:

import { ExtraOptions, RouterModule, Routes } from '@angular/router';

const routerOptions: ExtraOptions = {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  scrollOffset: [0, 64],  
  onSameUrlNavigation: 'ignore',
};

@NgModule({
  imports: [RouterModule.forRoot(routes, routerOptions)],
  exports: [RouterModule]
})

You can toggle onSameUrlNavigation to have the value 'ignore' or 'reload'. If you change it to 'ignore', does it change the behavior when you click on the fragment link? The above has worked for me.

As the linked articles show, you can rather implement RouterModule.forChild in a separate routing file if it contains specific routes you want to use in relation to your base/root.

Angular Component reloading whenever clicking fragment

2 Answers2