Uso del fragmento de enlace de anclaje HTML en Angular 6

6 minutos de lectura

Avatar de usuario de Suresh Karia
Suresh Karia

Estoy trabajando con un proyecto Angular 6 en el que he deshabilitado/eliminado la estrategia de ubicación hash que elimina # de la URL.

debido a este cambio, el enlace tiene:

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>

ya no funciona, simplemente omite la URL de los componentes actuales y coloca #contactTypes después de localhost.

encontré esto problema de github que debería resolver el problema usando

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>

que pone #contactTypes al final de la URL pero no se desplaza a la parte superior del navegador.

Fuente: https://github.com/angular/angular/issues/6595

Avatar de usuario de Machado
Machado

Angular 6.1 viene con una opción llamada anchorScrolling que vive en el módulo del enrutador ExtraOptions. como el anchorScrolling definición dice:

Configura si el enrutador debe desplazarse al elemento cuando la URL tiene un fragmento.

'disabled' — no hace nada (predeterminado).

'enabled' — se desplaza hasta el elemento. Esta opción será la predeterminada en el futuro.

El desplazamiento de anclaje no ocurre en ‘popstate’. En su lugar, restauramos la posición que almacenamos o nos desplazamos hacia arriba.

Puedes usarlo así:

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

// then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)

  • Gracias por esta respuesta. Lo que me perdí fue que tienes que usar routerLink=”./” fragment=”anchorName” no puedes usar href=”#anchorName”

    – Peter de Colonia

    27 de noviembre de 2018 a las 8:41

  • Además, esto solo funciona con el primer clic. No funciona el 2do.

    – Phil

    20 de junio de 2019 a las 5:28

  • Para que esto funcione en el segundo clic, debe agregar onSameUrlNavigation: 'reload' opción en el routerOptions.

    – Nitin avula

    16 sep 2019 a las 16:02


  • Para que esta solución funcione, también tuve que agregar angular.io/api/router/ExtraOptions#scrollPositionRestoration

    – Jessy

    19 de mayo de 2020 a las 17:18

  • ^^^ Confirmado, esto también funciona en Angular 11. Todas las opciones mencionadas anteriormente también funcionan, es decir anchorScrolling: 'enabled', onSameUrlNavigation: 'reload', scrollPositionRestoration: 'enabled'.

    – Krishnan

    15 de febrero de 2021 a las 15:47

Estaba buscando una solución similar e intenté usar el ngx-scroll-to paquete y descubrió que no funciona en la última versión de angular, así que decidió buscar otra opción y descubrió que podemos usar scrollIntoView

Código HTML :

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Código Ts:

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

  • Gracias, su respuesta es absolutamente buena y fácil de entender con un código simple y corto.

    – Wasif

    5 de septiembre de 2018 a las 8:29

  • ¿Puede proporcionar enlaces dinámicos? Hay otras respuestas para este propósito, pero el código no es simple.

    – Wasif

    5 de septiembre de 2018 a las 8:38

  • Esto no es lo ideal, porque no proporciona al usuario un enlace que pueda compartir con otros, como “example.org/help#installing”.

    – ANeves

    26 de marzo de 2019 a las 14:44

  • @ANeves Sí, “Esto no es ideal” en este momento, pero esa característica achorScrolling no estaba disponible cuando respondí la pregunta. ya que angular 6.1 se lanzó más tarde. Esta solución puede ser útil para aquellos que trabajan en una versión anterior de angular. Es genial que las soluciones evolucionen con cada nueva versión de angular

    – Joel José

    26 de marzo de 2019 a las 17:56


avatar de usuario de bc100k
bc100k

Esto funcionó para mí (estoy usando Angular 12.1.3):

En la plantilla HTML:

<a (click)="scrollTo('anchorId')">Scroll to another position</a>

Pase la identificación del elemento al que desea desplazarse (sin el símbolo del hashtag) #) a la función.

Luego, en Typescript, use .scrollIntoView para hacer que el navegador se desplace a la posición de ese elemento.

scrollTo(element: any): void {
  (document.getElementById(element) as HTMLElement).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

  • En la plantilla HTML: <div id="anchorId">

    – MeerArtefakt

    10 de junio de 2022 a las 8:05


Por razones de accesibilidad tuve que poner un enlace al principio del documento para proporcionar acceso directo al contenido al usuario usando un lector de pantalla, saltando partes de la página que se repiten de página en página.

Como necesitaba que el enlace permaneciera enfocable (preferiblemente manteniendo el atributo href), ya que en realidad estaba fuera de la raíz de la aplicación o cualquier componente (todavía la solución funciona dentro de un componente), para hacerlo usé html y javascript simples y buenos a la antigua:

<a href="./#content"
     onclick="event.preventDefault(); location.hash="content";"
     class="content-shortcut"
     title="Access page content directly"
     i18n-title
     aria-label="Access page content directly"
     i18n-label>Access page content directly</a>
  <style>
    .content-shortcut {
      position: absolute;
      opacity: 0;
      height: 0px;
      font-size: 1px;
    }

    .content-shortcut:focus,
    .content-shortcut:active {
      position: relative;
      opacity: 1;
      height: auto;
      font-size: 1em;
      display: block;
      color: black;
      background: white;
    }

  </style>

usar Desplazamiento de la página ngx

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>

  • Buena respuesta, está funcionando bien. Si está en la página de inicio, por ejemplo, debe hacer href=”home#anchor”. +1

    – PierreD

    1 de febrero de 2019 a las 12:10


  • No necesita una biblioteca para eso, este comportamiento está incluido en el enrutador angular.

    – Machado

    21 de junio de 2019 a las 17:14

Avatar de usuario de Alex Walker
alex caminante

Como señaló Nitin Avula en un comentario, usando routerLink para un ancla hash solo funciona si está navegando a una ruta diferente o tiene onSameUrlNavigation habilitado en la configuración de su enrutador.

Una forma de sortear esto es deshacerse de routerLink y en su lugar usar this.router.navigate en tus *.component.ts archivo con el fragment parámetro:

html-

<a (click)="scrollToContactTypes()">Contact Types</a>

Mecanografiado –

constructor(private router: Router) { }

scrollToContactTypes() {
    this.router.onSameUrlNavigation = "reload";
    this.router.navigate(["/settings"], { fragment: "contactTypes" }).finally(() => {
        this.router.onSameUrlNavigation = "ignore"; // Restore config after navigation completes
    });
}

  • Buena respuesta, está funcionando bien. Si está en la página de inicio, por ejemplo, debe hacer href=”home#anchor”. +1

    – PierreD

    1 de febrero de 2019 a las 12:10


  • No necesita una biblioteca para eso, este comportamiento está incluido en el enrutador angular.

    – Machado

    21 de junio de 2019 a las 17:14

Avatar de usuario de Anjana Silva
anjana silva

Esto es para Angular 9, pero estoy seguro de que la comunidad se beneficiará de esto,

Puedes usar Location en el @angular/common para obtener la ruta actual.

Digamos que tiene el siguiente elemento con una identificación para enfocar

<div id="bring-me-to-the-focus">

Aquí solo muestro bloques de código extraídos.

import { Location } from '@angular/common';

constructor(private location: Location) { }

this.location.path() + '#bring-me-to-the-focus'; 

Estoy seguro de que esto ayudará a alguien 🙂

Salud.

  • No creo que esto sea necesario ya que el enrutador proporciona esta función con anchorScrolling y onSameUrlNavigation

    – giovannips

    14 de enero de 2021 a las 12:51

¿Ha sido útil esta solución?