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


140

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.


Todavía puedes. Es solo html. ¿Algún uso particular para ello?
Sasxa

Sí, sigue siendo válido html, pero el efecto no es el mismo con Angular 1.x.
Jerusalén

1
¿Intentaste solo <a>, sin "html"?
Sasxa

3
Sí, pero el navegador no lo trata de la misma manera. Sé que puedo anular, es decir, el efecto del cursor con css, y asignar puntero a todas las aetiquetas. Pero eso parece hacky.
Jerusalén

3
Mi opinión es que ng1 way era el camino incorrecto (: El comportamiento predeterminado debería ser como está en html estándar ...
Sasxa

Respuestas:


187

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>

2
Esto funcionó [routerLink]=""como <a href="null" (click)="myFunction()">My Link</a>Renular 5 en Chrome 64.
Zymotik

3
Puedo confirmar lo mismo [routerLink]=""/ href="null"está trabajando en IE 11
Zymotik

1
<a [routerLinkfont>="" (click)="passTheSalt()"> Haga clic en mí </a> funciona en angular7. Veo <a (clic )="passTheSalt()"> Haga clic en mí </a> sin routerLInk también funciona en angular7. ¿Cuál es la mejor manera de hacer un enlace de anclaje pasivo usando [routerLink] o sin routerLink?
Ian Poston Framer

1
@IanPostonFramer Cuando elimino [routerLink]="", el texto Haga clic en mí no se muestra como un enlace y no muestra el icono del cursor de mano.
Emiel Koning

55
AVISO: esto restablecerá sus parámetros de URL. el comprador tenga cuidado.
Stavm

88

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>

@ s.alem lo que sea que estés diciendo, que tener #anclaje interno hrefpuede afectar la Angular1ruta ... puedo enviarte a la página predeterminada (si está allí)
Pankaj Parkar

1
Sé el efecto de #en angular 1.x. Quiero un enlace que no haga nada en angular2, al igual que href=""en angular 1.x.
Jerusalén

@ s.alem, así <a href="">My Link</a>que haré eso ... ¿pero qué sucede actualmente con él?
Pankaj Parkar

1
[routerLink] = "" eliminará los parámetros de consulta de su ruta, probablemente no sea lo que desea. Se podría utilizar preservar la consulta params, pero esto parece ir demasiado lejos
narthur157

2
Sin embargo, la opción 1: href="javascript:void(0);"funciona para mí.
Paul Carlton

21

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.


Voto a favor de una solución global y angular, pero no la estoy aceptando como la respuesta correcta porque, como dije, solo estoy buscando una solución lista para usar, hasta que confirmen que no la habrá o hasta que realmente necesite eso. Pero aún así muchas gracias.
Jerusalén

2
El problema con pointer-eventses la falta de soporte con IE ( caniuse ) (puedo evitarlo incluso con IE11 por extraño que parezca), y no impide hacer clic en el enlace desde la consola. He votado a favor de la respuesta @Pankaj porque es la más fácil desde mi punto de vista, mi respuesta es solo una forma de hacerlo con angular2, podría hacerlo más fácil, pero los selectores css son limitados.
Eric Martinez

1
Esto parece romper los enlaces de la pestaña de arranque (como <a href="#tab-id">)
xd6_

¿En qué módulo está la función bootstrap?
Jun711

16

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>

1
Me gusta esta solución Si desea tener un cursor para mostrar una mano, agregue style = "cursor: puntero".
newman

En muchas situaciones, una buena solución, sin embargo, tenga en cuenta que el botón tiene dimensiones más grandes que solo el anclaje basado en texto.
Yankee

@yankee puedes cambiar eso en css, pero no lo recomiendo ... el hecho es que un botón es un botón y un enlace es un enlace ... demasiado triste, la web no es tan blanca o negra.
Ayyash

11

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


1
Esta es una mejor solución ya que es principalmente un efecto visual que falta. ¡Puede poner este CSS en el styles.cssarchivo de nivel superior del proyecto Angular y funcionará muy bien!


5

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

No deberías hacer eso en el sentido del marcado semántico. Use un buttonElemento en caso de que quiera doSomethingen la página.
Michael Kühnel

<button>Los elementos activan el clic de forma predeterminada cuando spacese presiona la tecla. El uso span(o <a>) elimina esta función, por lo que las acciones del teclado no funcionarán como se esperaba
Drenai,

4

Aquí hay una manera simple

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

capturar el evento burbujeante y derribarlo


¿Por qué no usar el propio ancla para evitar el comportamiento predeterminado? Como se describe aquí: stackoverflow.com/a/44465069/702783 Parece menos »hacky« para mí.
Michael Kühnel

4

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>


3

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


3

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

3

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

3

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>

0

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.


0

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

-1

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

-1

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

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


tal vez algún comentario por qué esa técnica es mala?
grigson

1
Escribir clics en todas partes del código cuando no quieres un clic es malo
Jens Alenius

2
pero esto es exactamente lo que quiero hacer: marcar el lugar en el código como "nada al hacer clic", pero admite una nueva sintaxis. Construcciones como onclick = "javascript: void" son realmente feas. Y href = "#" no son confiables, ya que pueden elevar su ventana gráfica a la cima. Así que no puedo ver mejores alternativas
grigson

Me gusta tu solución Gracias.
Mai Hữu Lợi

Mira mi nueva respuesta. Si no desea que el achor navegue es un botón 'tipo'
Jens Alenius
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.