Collegamento passivo in Angolare 2 - <a href=annuncio annunciato> equivalente

In Angular 1.x posso fare quanto segue per creare un collegamento che sostanzialmente non fa nulla:

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

Ma lo stesso tag passa alla base dell'app in Angular 2. Qual è l'equivalente di quello in Angular 2?

Modifica: sembra un bug nel router Angular 2 e ora c'è un problema aperto su github a riguardo.

Sto cercando una soluzione pronta all'uso o una conferma che non ce ne sarà.

Se hai Angular 5 o superiore, cambia

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

in

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

Verrà visualizzato un collegamento con un'icona a forma di mano quando ci si passa sopra e si fa clic su di esso non attiverà alcun percorso.

Nota: se si desidera mantenere i parametri della query, è necessario impostare l' queryParamsHandlingopzione su preserve:

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

Sarà lo stesso, non ha nulla a che fare con angular2. È un semplice tag HTML.

Fondamentalmente il atag (anchor) verrà reso dal parser HTML.

modificare

Puoi disabilitarlo hrefavendo javascript:void(0)su di esso in modo che non accadrà nulla su di esso. (Ma il suo hack). So che Angular 1 ha fornito questa funzionalità pronta all'uso che non mi sembra corretta ora.

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

Plunkr

In alternativa si potrebbe usare una routerLinkdirettiva con ""valore di passaggio che alla fine genererà spaziohref=""

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

Ci sono modi per farlo con angular2, ma non sono assolutamente d'accordo che si tratti di un bug. Non ho familiarità con angular1, ma questo sembra un comportamento davvero sbagliato anche se come affermi sia utile in alcuni casi, ma chiaramente questo non dovrebbe essere il comportamento predefinito di qualsiasi framework.

A parte i disaccordi puoi scrivere una semplice direttiva che prende tutti i tuoi collegamenti e controlla hrefil contenuto e se la lunghezza è 0 che esegui preventDefault(), ecco un piccolo esempio.

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

Puoi farlo funzionare su tutta l'applicazione aggiungendo questa direttiva in PLATFORM_DIRECTIVES

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

Ecco un plnkr con un esempio funzionante.

Un achor dovrebbe navigare verso qualcosa, quindi immagino che il comportamento sia corretto quando instrada. Se ne hai bisogno per attivare o disattivare qualcosa sulla pagina è più simile a un pulsante? Uso bootstrap così posso usare questo:

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

Sto usando questa soluzione 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>

Spero che questo ti aiuti

soluzione simeyla :

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

Una soluzione davvero semplice non è quella di utilizzare un tag A: utilizzare invece un intervallo:

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

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

Ecco un modo semplice

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

cattura l'evento gorgogliante e abbattilo

Ecco alcuni modi per farlo:

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

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

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

Nel mio caso, l'eliminazione dell'attributo href risolve il problema finché esiste una funzione clic assegnata a.

Hai impedito il comportamento predefinito del browser. Ma non è necessario creare una direttiva per raggiungere questo obiettivo.

È facile come il seguente esempio:

my.component.html

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

my.component.ts

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

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

Ho 4 soluzioni per il tag di ancoraggio fittizio.

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

4. Se si utilizza bootstrap:

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

Mi chiedo perché nessuno stia suggerendo routerLink e routerLinkActive (Angular 7)

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

Ho rimosso l'HREF e ora sto usando questo. Quando si utilizza href, si andava all'URL di base o si ricaricava di nuovo lo stesso percorso.

è necessario impedire il comportamento predefinito dell'evento come segue.

In html

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

Nel file ts

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

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

utilizzando

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

La soluzione davvero semplice è (click)="(null)"

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