Actualizar

Esto ahora es compatible

 <a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

 this._router.navigate( ['/somepath', id ], {fragment: 'test'});

Agregue el siguiente código a su componente para desplazarse

 import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import private fragment: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); } ngAfterViewInit(): void { try { document.querySelector('#' + this.fragment).scrollIntoView(); } catch (e) { } }

Original

Este es un problema conocido y rastreado en https://github.com/angular/angular/issues/6595

Lo siento por responder un poco tarde; Hay una función predefinida en la documentación de enrutamiento angular que nos ayuda a enrutar con un hashtag al ancla de la página, es decir, AnchorScrolling: 'habilitado'

Paso 1:- Primero importe el RouterModule en el archivo app.module.ts:-

 imports:[ BrowserModule, FormsModule, RouterModule.forRoot(routes,{ anchorScrolling: 'enabled' }) ],

Paso 2: - Vaya a la página HTML, cree la navegación y agregue dos atributos importantes como [routerLink] y fragmento para hacer coincidir las ID de Div respectivas: -

 <ul> <li> <a [routerLink] = "['/']" fragment="home"> Home </a></li> <li> <a [routerLink] = "['/']" fragment="about"> About Us </a></li> <li> <a [routerLink] = "['/']" fragment="contact"> Contact Us </a></li> </ul>

Paso 3:- Cree una sección/div haciendo coincidir el nombre de ID con el fragmento :-

 <section id="home" class="home-section"> <h2> HOME SECTION </h2> </section> <section id="about" class="about-section"> <h2> ABOUT US SECTION </h2> </section> <section id="contact" class="contact-section"> <h2> CONTACT US SECTION </h2> </section>

Para su referencia, he agregado el siguiente ejemplo creando una pequeña demostración que ayuda a resolver su problema.

Demostración: https://routing-hashtag-page-anchors.stackblitz.io/

Aunque la respuesta de Günter es correcta, no cubre la parte de la etiqueta de anclaje "saltar a" .

Por lo tanto, además de:

 <a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

 this._router.navigate( ['/somepath', id ], {fragment: 'test'});

... en el componente (principal) donde necesita un comportamiento de "saltar a", agregue:

 import { Router, NavigationEnd } from '@angular/router'; class MyAppComponent { constructor(router: Router) { router.events.subscribe(s => { if (s instanceof NavigationEnd) { const tree = router.parseUrl(router.url); if (tree.fragment) { const element = document.querySelector("#" + tree.fragment); if (element) { element.scrollIntoView(true); } } } }); } }

¡ Tenga en cuenta que se trata de una solución ! Siga este problema de github para futuras actualizaciones. ¡Créditos a Victor Savkin por proporcionar la solución!