Tautan Pasif dalam Angular 2 - <a href=""> setara

Di Angular 1.x saya bisa melakukan yang berikut untuk membuat tautan yang pada dasarnya tidak melakukan apa-apa:

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

Tetapi tag yang sama menavigasi ke basis aplikasi di Angular 2. Apa yang setara dengan itu di Angular 2?

Sunting: Sepertinya ada bug di Angular 2 Router dan sekarang ada masalah terbuka pada github tentang itu.

Saya mencari solusi di luar kotak atau konfirmasi bahwa tidak akan ada.

Jika Anda memiliki Sudut 5 atau lebih, ubah saja

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

ke

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

Tautan akan ditampilkan dengan ikon tangan ketika melayang di atasnya dan mengkliknya tidak akan memicu rute apa pun.

Catatan: Jika Anda ingin menyimpan parameter kueri, Anda harus mengatur queryParamsHandlingopsi ke preserve:

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

Itu akan sama, tidak ada hubungannya angular2. Ini adalah tag html sederhana.

Pada dasarnya atag (jangkar) akan diberikan oleh pengurai HTML.

Edit

Anda dapat menonaktifkannya hrefdengan javascript:void(0)menggunakannya sehingga tidak ada yang terjadi di sana. (Tapi retasnya). Saya tahu Angular 1 menyediakan fungsi ini di luar kotak yang tampaknya tidak benar bagi saya sekarang.

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

Plunkr

Cara lain bisa menggunakan, routerLinkdirektif dengan ""nilai kelulusan yang pada akhirnya akan menghasilkan kosonghref=""

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

Ada cara untuk melakukannya dengan angular2, tapi saya sangat tidak setuju ini bug. Saya tidak terbiasa dengan angular1, tapi ini sepertinya perilaku yang benar-benar salah meskipun seperti yang Anda klaim berguna dalam beberapa kasus, tetapi jelas ini seharusnya tidak menjadi perilaku default kerangka kerja apa pun.

Selain perbedaan pendapat Anda dapat menulis arahan sederhana yang mengambil semua tautan Anda dan memeriksa hrefkontennya dan jika panjangnya 0 Anda jalankan preventDefault(), berikut adalah sedikit contoh.

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

Anda dapat membuatnya berfungsi di seluruh aplikasi Anda dengan menambahkan arahan ini di PLATFORM_DIRECTIVES

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

Berikut ini adalah plnkr dengan contoh yang berfungsi.

Seorang pengarah harus menavigasi ke sesuatu, jadi saya kira perilaku itu benar ketika rute. Jika Anda memerlukannya untuk beralih sesuatu di halaman itu lebih seperti sebuah tombol? Saya menggunakan bootstrap sehingga saya bisa menggunakan ini:

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

Saya menggunakan solusi ini dengan 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>

Semoga ini membantu

solusi simeyla :

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

Solusi yang sangat sederhana adalah tidak menggunakan tag A - sebaliknya gunakan rentang:

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

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

Ini cara sederhana

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

tangkap peristiwa menggelegak dan tembak jatuh

Berikut ini beberapa cara untuk melakukannya:

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

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

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

Dalam kasus saya menghapus atribut href memecahkan masalah asalkan ada fungsi klik menetapkan ke.

Anda telah mencegah perilaku browser default. Tetapi Anda tidak perlu membuat arahan untuk mencapai itu.

Sangat mudah seperti contoh berikut:

my.component.html

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

my.component.ts

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

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

Saya punya 4 solusi untuk tag anchor dummy.

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

4. Jika Anda menggunakan bootstrap:

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

Saya bertanya-tanya mengapa tidak ada yang menyarankan routerLink dan routerLinkActive (Angular 7)

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

Saya menghapus href dan sekarang menggunakan ini. Saat menggunakan href, itu akan menuju url pangkalan atau memuat kembali rute yang sama.

Anda perlu mencegah perilaku default acara sebagai berikut.

Dalam html

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

Dalam file ts

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

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

Menggunakan

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

Solusi yang sangat sederhana (click)="(null)"

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