Link passivo no Angular 2 - <a href=Produzido> equivalente

No Angular 1.x, posso fazer o seguinte para criar um link que basicamente não faz nada:

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

Mas a mesma tag navega para a base de aplicativos no Angular 2. Qual é o equivalente ao Angular 2?

Edit: Parece um bug no roteador Angular 2 e agora existe um problema em aberto no github sobre isso.

Estou procurando uma solução pronta para uso ou uma confirmação de que não haverá.

Se você possui Angular 5 ou superior, basta alterar

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

para dentro

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

Um link será exibido com um ícone de mão ao passar o mouse sobre ele e clicar nele não acionará nenhuma rota.

Nota: Se você deseja manter os parâmetros da consulta, defina a queryParamsHandlingopção para preserve:

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

Será o mesmo, não tem nada relacionado angular2. É simples tag html.

Basicamente, a amarca (âncora) será renderizada pelo analisador de HTML.

Editar

Você pode desativar esse hrefpor ter javascript:void(0)nele assim nada vai acontecer nele. (Mas é hack). Eu sei que o Angular 1 forneceu essa funcionalidade pronta para uso, o que não parece correto para mim agora.

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

Plunkr

Por outro lado, poderia estar usando routerLinkdiretiva com ""valor de passagem que acabará gerando espaço em brancohref=""

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

Existem maneiras de fazer isso com o angular2, mas eu discordo totalmente que isso é um bug. Não estou familiarizado com o angular1, mas isso parece um comportamento realmente errado, embora, como você alega, seja útil em alguns casos, mas claramente esse não deve ser o comportamento padrão de qualquer estrutura.

Discordâncias à parte, você pode escrever uma diretiva simples que agarre todos os seus links e verifique hrefo conteúdo de cada um. Se o comprimento for 0, você executará preventDefault(), aqui está um pequeno exemplo.

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

Você pode fazê-lo funcionar em seu aplicativo adicionando esta diretiva em PLATFORM_DIRECTIVES

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

Aqui está um plnkr com um exemplo de trabalho.

Um achor deve navegar para alguma coisa, então acho que o comportamento é correto quando é direcionado. Se você precisar alternar algo na página, é mais como um botão? Eu uso o bootstrap para poder usar isso:

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

Estou usando esta solução alternativa com 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 isto ajude

solução simeyla :

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

Uma solução realmente simples é não usar uma tag A - use uma extensão:

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

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

Aqui está uma maneira simples

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

capturar o evento borbulhante e derrubá-lo

Aqui estão algumas maneiras de fazer isso:

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

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

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

No meu caso, a exclusão do atributo href resolve o problema, desde que haja uma função de clique atribuir a a.

Você impediu o comportamento padrão do navegador. Mas você não precisa criar uma diretiva para fazer isso.

É fácil como no exemplo a seguir:

my.component.html

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

my.component.ts

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

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

Eu tenho 4 soluções para tag de âncora fictícia.

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

4. Se você estiver usando o bootstrap:

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

Gostaria de saber por que ninguém está sugerindo routerLink e routerLinkActive (Angular 7)

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

Eu removi o href e agora estou usando isso. Ao usar o href, ele estava indo para o URL base ou recarregando a mesma rota novamente.

você precisa impedir o comportamento padrão do evento da seguinte maneira.

Em html

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

No arquivo ts

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

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

Usando

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

A solução realmente simples é (click)="(null)"

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