En Angular 1.x puedo hacer lo siguiente para crear un enlace que básicamente no hace nada:
<a href="">My Link</a>Pero la misma etiqueta navega a la base de la aplicación en Angular 2. ¿Cuál es el equivalente de eso en Angular 2?
Editar: parece un error en el enrutador Angular 2 y ahora hay un problema abierto en github al respecto.
Estoy buscando una solución lista para usar o una confirmación de que no habrá ninguna.
Si tiene Angular 5 o superior, simplemente cambie
<a href="" (click)="passTheSalt()">Click me</a>en
<a [routerLink]="" (click)="passTheSalt()">Click me</a>Se mostrará un enlace con un icono de mano al pasar el cursor sobre él y hacer clic en él no activará ninguna ruta.
Nota: si desea mantener los parámetros de consulta, debe configurar la opción queryParamsHandling para preserve :
<a [routerLink]="" queryParamsHandling="preserve" (click)="passTheSalt()">Click me</a>Eso será lo mismo, no tiene nada relacionado con angular2 . Es una simple etiqueta html.
Básicamente, a etiqueta (anclaje) será procesada por el analizador HTML.
Editar
Puede deshabilitar ese href al tener javascript:void(0) en él para que no suceda nada. (Pero es un truco). Sé que Angular 1 proporcionó esta funcionalidad lista para usar, lo que ahora no me parece correcto.
<a href="javascript:void(0)" >Test</a> La otra forma podría ser usar la directiva routerLink con pasar el valor "" que eventualmente generará href="" en blanco
<a routerLink="" (click)="passTheSalt()">Click me</a>Hay formas de hacerlo con angular2, pero no estoy de acuerdo en que esto sea un error. No estoy familiarizado con angular1, pero parece un comportamiento realmente incorrecto, aunque, como usted afirma, es útil en algunos casos, pero claramente este no debería ser el comportamiento predeterminado de ningún marco.
Dejando a un lado los desacuerdos, puede escribir una directiva simple que tome todos sus enlaces y verifique el contenido de href y si la longitud es 0, ejecute preventDefault() , aquí hay un pequeño ejemplo.
@Directive({ selector : '[href]', host : { '(click)' : 'preventDefault($event)' } }) class MyInhertLink { @Input() href; preventDefault(event) { if(this.href.length == 0) event.preventDefault(); } }Puede hacer que funcione en su aplicación agregando esta directiva en PLATFORM_DIRECTIVES
bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: MyInhertLink, multi: true})]);Aquí hay un plnkr con un ejemplo de trabajo.