Al hacer clic en cualquier enlace de anclaje que tenga href='#' , la ruta del enrutador angular
{ path: '', component: NologinComponent, pathMatch: 'full' } coincide, ¿cómo debo manejar estos enlaces de anclaje para que el anclaje con href='#' permanezca en la misma página, es decir, no haga nada?
Ejemplo de etiqueta de anclaje
<a class="title-logo" href="#"><img src="/Content/Images/Image1.png"></a>
Un punto más a considerar, he usado <base href="/" /> en la página de diseño para que, al actualizar, angular permanezca en la página actual y busque los recursos de "/" no desde dentro del componente actual.
Hay algunas opciones:
Opción 1:
Anule el atributo href con una directiva:
@Directive({ selector : '[href]' }) export class MyLinkDirective { @Input() href: string; @HostListener('click', ['$event']) noop(event: MouseEvent) { if(this.href.length === 0 || this.href === '#') { event.preventDefault(); } } }Personalmente, me gusta esta solución porque es global y angular. Aquí hay un ejemplo de stackblitz .
opcion 2
Puede usar css y deshacerse del atributo href todos juntos:
a { cursor: pointer; user-select: none; }Entonces tus enlaces inactivos serían:
<a class="title-logo"><img src="/Content/Images/Image1.png"></a>Opción 3
pointer-events CSS:
a.noop { pointer-events: none; }Uso
<a class="title-logo noop" href="#"><img src="/Content/Images/Image1.png"></a> pointer-events pueden causar problemas en algunos navegadores (especialmente en los más antiguos), si le interesan. Puedes ver la lista de compatibilidad aquí .
Prueba esto
href='javascript:void(0);'Dado que agregar esta funcionalidad es complicado, le sugiero que no reinvente la rueda, eche un vistazo a ng2-page-scroll .
Si desea investigar más, debe leer la Guía de navegación y enrutador .