web-dev-qa-db-fra.com

Lien passif en Angular 2 - <a href=""> équivalent

Dans Angular 1.x, je peux procéder comme suit pour créer un lien qui ne fait fondamentalement rien:

<a href="">My Link</a>

Mais la même balise accède à la base de l'application dans Angular 2. Quel est l'équivalent de celle de Angular 2?

Edit: Cela ressemble à un bogue dans le routeur Angular 2 et il y a maintenant n problème en cours sur github à ce sujet.

Je recherche une solution prête à l'emploi ou une confirmation qu'il n'y en aura pas.

angularroutingangular2-routingangular-router
106
s.alem

Si vous avez Angular 5 ou supérieur, il suffit de changer

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

dans

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

Un lien sera affiché avec une icône représentant une main lorsque vous le survolerez et que cliquer dessus ne déclenchera aucun itinéraire.

131
Emiel Koning

Ce sera la même chose, il n’a rien qui a rapport avec angular2. C'est une simple balise HTML.

Fondamentalement, la balise a (ancre) sera rendue par l’analyseur HTML.

Modifier

Vous pouvez désactiver cette href en ayant javascript:void(0) dessus afin que rien ne se passe dessus. (Mais c'est bidouille). Je sais que Angular 1 a fourni cette fonctionnalité prête à l'emploi qui ne me semble pas correcte à présent.

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

Plunkr

Vous pouvez également utiliser la directive routerLink avec la valeur "" qui générera éventuellement une valeur vide href=""

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

Il y a moyen de le faire avec angular2, mais je suis tout à fait en désaccord, c'est un bug. Je ne suis pas familiarisé avec angular1, mais cela semble être un comportement vraiment faux, même si, comme vous le dites utile, dans certains cas, cela ne devrait manifestement pas être le comportement par défaut d'un framework.

En dehors des désaccords, vous pouvez écrire une directive simple qui saisit tous vos liens et vérifier le contenu de href. Si sa longueur est égale à 0, vous exécutez preventDefault(), voici un petit exemple.

@Directive({
  selector : '[href]',
  Host : {
    '(click)' : 'preventDefault($event)'
  }
})
class MyInhertLink {
  @Input() href;
  preventDefault(event) {
    if(this.href.length == 0) event.preventDefault();
  }
}

Vous pouvez le faire fonctionner dans votre application en ajoutant cette directive dans PLATFORM_DIRECTIVES

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

Voici un plnkr avec un exemple qui fonctionne.

21
Eric Martinez

Un achor devrait naviguer vers quelque chose, alors je suppose que le comportement est correct quand il se dirige. Si vous en avez besoin pour basculer quelque chose sur la page, c'est plus comme un bouton? J'utilise bootstrap _ pour pouvoir utiliser ceci:

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

J'utilise cette solution de contournement avec 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>

J'espère que cela t'aides

10
Sabri Aziri

solution de simeyla :

<a href="#" (click)="foo(); false">
<a href="" (click)="false">
7
ali-myousefi

Une solution très simple consiste à ne pas utiliser une balise A, mais plutôt une étendue:

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

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

Voici un moyen simple

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

capturer l'événement bouillonnant et l'abattre

4
born2net

Mis à jour pour 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();
    }
  }
}
4
CBarr

J'ai 4 solutions pour la balise d'ancrage factice.

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

4 .Si vous utilisez bootstrap:

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

Dans mon cas, la suppression de l'attribut href résout le problème tant qu'il existe une fonction de clic affectée à a.

3
Michał Ignaszewski

Vous avez empêcher le comportement du navigateur par défaut. Mais vous n’avez pas besoin de créer une directive pour accomplir cela.

C’est simple comme l’exemple suivant:

my.component.html

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

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}
2
Michael Kühnel

Voici toutes les façons de le faire dans le contexte Angular2 +:

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

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

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

2
Sal

Je me demande pourquoi personne ne suggère routeurLink et routerLinkActive (Angular 7)

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

J'ai enlevé le href et maintenant l'utiliser. Lors de l’utilisation de href, il se dirigeait vers l’URL de base ou rechargeait à nouveau le même itinéraire.

1
Monster Brain

Mise à jour pour 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();
        }
    }
}

En utilisant

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

La solution vraiment simple est (click)="(null)"

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

0
grigson

vous pouvez ajouter javascript:; dans l'attribut href à la place routerLink = ""

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

use routerLink = "" avez un problème lorsque vous êtes sur une autre page.

0
Muhammad Al Faris