Un enlace para cambiar una página entre la salida del enrutador no funciona bien, se mueve a una página correcta pero aterriza en el medio de la página (en algún lugar debajo de la salida del enrutador) en lugar del encabezado donde configuré el foco.

• RouterLink funciona entre el exterior de la salida del enrutador (navegación) y la salida del enrutador.
• Si elimino fragment/focusDirective, aparece en la parte superior de la página, pero necesito tener fragment para que el lector de pantalla lea el encabezado.
• El encabezado se enfoca (probado con la extensión de cromo NerdeFocus) cuando la página se ha renderizado, por lo que la función de enfoque parece funcionar
• Traté de agregar la función scrollIntoView en el componente de la aplicación, pero no ayudó
• estoy usando angular11

aplicación.ts

 <nav class="col-lg-3"> .... </nav> <div class="col-lg-9"> <router-outlet></router-outlet> </div>

app-routing.module.ts

 const routes: Routes = [ { path: 'a', component: AComponent, }, { path: 'b', component: BComponent, }, ]; @NgModule({ imports: [ RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' }), exports: [RouterModule] }) export class AppRoutingModule { }

Componente A html

 <a (click)="onEditMode($event)">Edit</a>

Componente A ts

 onEditMode(event) { event.preventDefault(); this.router.navigateByUrl('componentB#header'); }

Componente B html

 <h1 id="header" tabindex="-1" appFocusFragment>Header</h1>

fragmento de enfoque

 @Directive({ selector: '[appFocusFragment]' }) export class FocusFragmentDirective implements AfterViewInit{ constructor(private route: ActivatedRoute) { } ngAfterViewInit() { this.route.fragment.subscribe(fragment => { const anchor = document.querySelector<HTMLAnchorElement>(`#${fragment}`); if (fragment && anchor) { anchor.scrollIntoView(); anchor.focus(); } }); } }

Perdón por mi mala explicación y mi inglés, por favor avíseme si necesita más información.

¡Gracias!