angular - change - routerlink

Enlace pasivo en Angular 2-<a href= olvidó> equivalente

Question

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.

Answer 1

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

Answer 2

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

Answer 3

Aquí están todas las formas de hacerlo dentro del contexto Angular2 +:

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

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

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

Answer 4

Aquí hay una manera simple

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

capturar el evento burbujeante y derribarlo

Answer 5

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

Answer 6

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

Básicamente, a analizador HTML representará una etiqueta (ancla).

Editar

Puede deshabilitar ese href al tener javascript:void(0) para que no suceda nada. (Pero es un truco). Sé que Angular 1 proporcionó esta funcionalidad de fábrica que ahora no me parece correcta.

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

Plunkr

Al revés podría estar usando la directiva routerLink con "" valor que pasa y que eventualmente generará href="" blanco

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

Answer 7

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

Answer 8

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

Answer 9

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 el contenido de href y, si su 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 funcionando.

Answer 10

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

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

Answer 11

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. Cuando usaba href, iba a la url base o volvía a cargar la misma ruta.

Answer 12

Si tienes Angular 5 o superior, solo cambia

<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.

Answer 13

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>

Answer 14

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>

Answer 15

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

Answer 16

puedes agregar javascript :; en el atributo href en su lugar routerLink = ""

<a href="javascript:;" *ngIf="item.submenu" class="m-menu__link m-menu__toggle"> some link </a>

use routerLink = "" tiene un problema mientras está en otra página.

Answer 17

solución de simeyla :

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