Enlace pasivo en Angular 2 - equivalente <a href=últiple>

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 Angular 2 Router y ahora hay un problema abierto en github sobre eso.

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>

dentro

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

Se mostrará un enlace con un icono de mano al pasar el mouse sobre él y hacer clic en él no activará ninguna ruta.

Nota: Si desea mantener los parámetros de consulta, debe configurar la queryParamsHandlingopción para preserve:

<a [routerLink]=""
   queryParamsHandling="preserve"
   (click)="passTheSalt()">Click me</a>

Eso será lo mismo, no tiene nada relacionado angular2. Es simple etiqueta html.

Básicamente a, la etiqueta (ancla) será procesada por el analizador HTML.

Editar

Puede deshabilitarlo hrefal tenerlo javascript:void(0)activado para que no suceda nada. (Pero es un truco). Sé que Angular 1 proporcionó esta funcionalidad fuera de la caja que ahora no me parece correcta.

<a href="javascript:void(0)" >Test</a>

Plunkr

Al revés podría estar usando una routerLinkdirectiva con ""valor de paso que eventualmente generará un espacio en blancohref=""

<a routerLink="" (click)="passTheSalt()">Click me</a>

Hay formas de hacerlo con angular2, pero estoy totalmente en desacuerdo porque es un error. No estoy familiarizado con angular1, pero esto 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 de lado los desacuerdos, puede escribir una directiva simple que tome todos sus enlaces y verifique hrefel contenido y, si su longitud es 0, se ejecuta 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 funcionando.

Un achor debería navegar hacia algo, así que supongo que el comportamiento es correcto cuando se enruta. Si lo necesitas para alternar algo en la página, ¿es más como un botón? Yo uso bootstrap para poder usar esto:

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>

Estoy usando esta solución alternativa con css:

/*** Angular 2 link without href ***/
a:not([href]){
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none
}

html

<a [routerLink]="/">My link</a>

Espero que esto ayude

solución de simeyla :

<a href="#" (click)="foo(); false">
<a href="" (click)="false">

Una solución realmente simple es no usar una etiqueta A, use un intervalo en su lugar:

<span class='link' (click)="doSomething()">Click here</span>

span.link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

Aquí hay una manera simple

  <div (click)="$event.preventDefault()">
            <a href="#"></a>
   </div>

capturar el evento burbujeante y derribarlo

Aquí hay algunas formas de hacerlo:

• <a href="" (click)="false">Click Me</a>

• <a style="cursor: pointer;">Click Me</a>

• <a href="javascript:void(0)">Click Me</a>

En mi caso, eliminar el atributo href resuelve el problema siempre que haya una función de clic asignada a a.

Has evitado el comportamiento predeterminado del navegador. Pero no necesita crear una directiva para lograrlo.

Es fácil como el siguiente ejemplo:

my.component.html

<a href="" (click)="goToPage(pageIndex, $event)">Link</a>

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}

Actualizado para Angular 5

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector : '[href]'
})
export class HrefDirective {
  @Input() public href: string | undefined;

  @HostListener('click', ['$event']) public onClick(event: Event): void {
    if (!this.href || this.href === '#' || (this.href && this.href.length === 0)) {
      event.preventDefault();
    }
  }
}

Tengo 4 soluciones para la etiqueta de anclaje ficticio.

    1. <a style="cursor: pointer;"></a>
    2. <a href="javascript:void(0)" ></a>
    3. <a href="current_screen_path"></a>

4. Si está utilizando bootstrap:

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>

Me pregunto por qué nadie sugiere routerLink y routerLinkActive (Angular 7)

<a [routerLink]="[ '/resources' ]" routerLinkActive="currentUrl!='/resources'">

Eliminé el href y ahora estoy usando esto. Al usar href, iba a la url base o volvía a cargar la misma ruta.

debe evitar el comportamiento predeterminado del evento de la siguiente manera.

En html

<a href="" (click)="view($event)">view</a>

En el archivo ts

view(event:Event){
 event.preventDefault();
 //remaining code goes here..
}

Actualizado para Angular2 RC4:

import {HostListener, Directive, Input} from '@angular/core';

@Directive({
    selector: '[href]'
})
export class PreventDefaultLinkDirective {

    @Input() href;
    @HostListener('click', ['$event']) onClick(event) {this.preventDefault(event);}

    private preventDefault(event) {
        if (this.href.length === 0 || this.href === '#') {
            event.preventDefault();
        }
    }
}

Utilizando

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: PreventDefaultLinkDirective, multi: true})]);

La solución realmente simple es (click)="(null)"

<a class="btn btn-default" (click)="(null)">Default</a>