Lien passif en angular 2 – équivalent

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

My Link 

Mais la même balise navigue vers la base de l’application dans Angular 2.

Quelle est l’équivalent de cela dans Angular 2?

Modifier:

Cela ressemble à un bug dans Angular 2 Router et maintenant il y a 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.

Ce sera la même chose, elle n’a rien à angular2 avec angular2 . C’est une balise HTML simple.

Fondamentalement, a balise (d’ancrage) sera rendue par l’parsingur HTML.

modifier

Vous pouvez désactiver ce href en ayant javascript:void(0) dessus pour que rien ne se passe dessus. (Mais c’est du piratage). Je sais qu’Angular 1 a fourni cette fonctionnalité par défaut, ce qui ne me semble pas correct maintenant.

 Test 

Plunkr

Changement

 Click me 

dans

 Click me 

Un lien sera affiché avec une icône de main lorsque vous le survolerez et en cliquant dessus, aucune route ne sera déclenchée.

Il y a des façons de le faire avec angular2, mais je ne suis pas du tout d’accord, c’est 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 cela ne doit clairement 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 et si la longueur de celui-ci est 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 de travail.

Un acheteur doit naviguer vers quelque chose, alors je suppose que le comportement est correct lors du routage. Si vous en avez besoin pour basculer quelque chose sur la page, cela ressemble plus à un bouton? J’utilise bootstrap pour pouvoir l’utiliser:

  

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

 My link 

J’espère que cela t’aides

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

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

Simeyla Solution :

   

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: ssortingng | undefined; @HostListener('click', ['$event']) public onClick(event: Event): void { if (!this.href || this.href === '#' || (this.href && this.href.length === 0)) { event.preventDefault(); } } } 

Voici un moyen simple

  

capturer l’événement bouillonnant et abattre

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

J’ai 4 solutions pour une balise d’ancrage factice.

  1.  2.  3.  

4. Si vous utilisez un bootstrap:

  

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

C’est facile comme l’exemple suivant:

my.component.html

 Link 

my.component.ts

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

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

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)"

Default