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

Dans Angular 1.x, je peux faire ce qui suit pour créer un lien qui ne fait pratiquement rien:

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

Mais la même balise navigue vers la base de l'application dans Angular 2. Quel est l'équivalent de cela dans Angular 2?

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

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

Si vous avez Angular 5 ou plus, changez simplement

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

dans

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

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

Remarque: si vous souhaitez conserver les paramètres de requête, vous devez définir l' queryParamsHandlingoption sur preserve:

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

Ce sera la même chose, cela n'a rien de lié angular2. C'est une simple balise HTML.

Fondamentalement, la abalise (d'ancrage) sera rendue par un analyseur HTML.

Éditer

Vous pouvez désactiver cela hrefen ayant javascript:void(0)dessus pour que rien ne se passe dessus. (Mais son hack). Je sais qu'Angular 1 a fourni cette fonctionnalité hors de la boîte qui ne me semble pas correcte maintenant.

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

Plunkr

Une autre solution pourrait être d'utiliser une routerLinkdirective avec une ""valeur de passage qui finira par générer un blanchref=""

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

Il existe des moyens de le faire avec angular2, mais je ne suis pas du tout d'accord pour dire qu'il s'agit d'un bug. Je ne suis pas familiarisé avec angular1, mais cela semble être un comportement vraiment erroné même si, comme vous le prétendez, il est utile dans certains cas, mais il est clair que cela ne devrait pas être le comportement par défaut de tout framework.

Mis à part les désaccords, vous pouvez écrire une directive simple qui saisit tous vos liens et vérifier hrefle contenu de et si la longueur de celui-ci est de 0 que 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 toute votre application en ajoutant cette directive dans PLATFORM_DIRECTIVES

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

Voici un plnkr avec un exemple de travail.

Un achor devrait naviguer vers quelque chose, donc je suppose que le comportement est correct lorsqu'il achemine. 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>

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

solution de simeyla :

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

Une solution très simple consiste à ne pas utiliser de balise A - utilisez plutôt un span:

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

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

Voici un moyen simple

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

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

Voici quelques moyens de le faire:

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

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

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

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

Vous avez empêché le comportement par défaut du navigateur. Mais vous n'avez pas besoin de créer une directive pour y parvenir.

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

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

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>

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

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

J'ai supprimé le href et je l'utilise maintenant. Lors de l'utilisation de href, il allait à l'URL de base ou rechargeait à nouveau la même route.

vous devez empêcher le comportement par défaut de l'événement comme suit.

En html

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

Dans le fichier ts

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

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

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

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