Estoy usando etiquetas de anclaje en mi barra de navegación para enviar a los usuarios a diferentes secciones en la página acerca de. El problema es que solo funciona si ya estoy en la página Acerca de. No salta a la ubicación específica que quiero cuando hago clic en esos enlaces en mi barra de navegación desde otras páginas (como, por ejemplo, la página de inicio).
Esta es mi navbar.html :
<mat-menu #aboutMenu="matMenu"> <button mat-menu-item> <a href="/about-us#about"> About </a> </button> <button mat-menu-item> <a href="/about-us#token"> Token </a> </button> <button mat-menu-item> <a href="/about-us#team"> Team </a> </button> </mat-menu> Y este es mi about.html :
<a name="about"> <h1>About</h1> </a> . . . <a name="token"> <h2>Token Details</h2> </a> . . <a name="team">Team Members</a>Lo resolví usando el siguiente código:
.html:
<a [routerLink]="'/about-us'" fragment="about" (click)="onAnchorClick()"> About </a>.ts:
onAnchorClick ( ) { this.route.fragment.subscribe ( f => { const element = document.querySelector ( "#" + f ) if ( element ) element.scrollIntoView ( true ) }); }Lo resolví con la ayuda de la respuesta de @davimargelo así:
navbar.html
<button mat-menu-item [routerLink]="'/about-us'" fragment="token" (click)="onAnchorClick()" class="button__mat--menu" > <a href="/about-us#token"> Token </a> </button> navbar.ts
onAnchorClick() { this.route.fragment.subscribe((f) => { const element = document.querySelector('#' + f); if (element) element.scrollIntoView(true); }); } about-us.html
<a name="token"> <h2 id="token-details">Token Details</h2> </a>Para navegar a otra página al hacer clic en un botón, simplemente use la sintaxis de vinculación de eventos angulares. La vinculación de eventos escucha el evento de clic del botón y llama a su método respectivo en el archivo componente.ts. Consulte el enlace para obtener más información: https://angular.io/guide/event-binding