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.
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
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
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
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
yonSameUrlNavigation
– giovannips
14 de enero de 2021 a las 12:51