angular - Child route with fragment

Question

I have a page with a side menu, each side menu item has a routerLink that sends a different fragment. I want to know if it is possible that this new route with the fragment has a child route.

Example:

Side menu:

<button type="button" routerLink="['/pageA']" fragment="frag">btn side menu</button>

On click this button, the route would look like this: http://localhost:4200/#/pageA#frag

Content Page

<button type="button" routerLink="['child-a']">A</button>
<button type="button" routerLink="['child-b']">B</button>

<router-outlet></router-outlet> // Here son A or son B will be loaded

And when click on button A, the route would look like this: http://localhost:4200/#/pageA#frag/child-a

page-routing.module.ts

const routes: Routes = [
 { path: '', component: PageAComponent,
   children: [
   {
    path: 'child-a',
    component: ChildAComponent,
   },
   {
    path: 'child-b',
    component: ChildBComponent,
   },
  ],
 },
];

Answer 1

I'm sorry, it was my lack of attention.

The correct way to do this is to call the child route passing the fragment again.

From the route

http://localhost:4200/#/pageA

I will have the button repeating the fragment that was previously passed

<button type="button" routerLink="['child-a']" fragment="frag">A</button>

And the final route will be

http://localhost:4200/#/pageA/child-a#frag

Update:

I didn't know the preserveFragment property yet, with this property I can call child routes and keep the fragment on the route.

The final solution looked like this

<button type="button" routerLink="['child-a']" [preserveFragment]="true">A</button>

And the final route will be

http://localhost:4200/#/pageA/child-a#frag