Uso del fragmento de enlace de anclaje HTML en Angular 6

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

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)

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"});
  }

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"});
}

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>

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
    });
}

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.