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.
<a>
, tanpa "html"?a
tag. Tapi itu terlihat berantakan.Jawaban:
Jika Anda memiliki Sudut 5 atau lebih, ubah saja
ke
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
queryParamsHandling
opsi kepreserve
:sumber
[routerLink]=""
sebagai<a href="null" (click)="myFunction()">My Link</a>
Angular 5 di Chrome 64.[routerLink]=""
/href="null"
berfungsi di IE 11[routerLink]=""
, teks Click me tidak ditampilkan sebagai tautan dan tidak menampilkan ikon kursor tangan.Itu akan sama, tidak ada hubungannya
angular2
. Ini adalah tag html sederhana.Pada dasarnya
a
tag (jangkar) akan diberikan oleh pengurai HTML.Edit
Anda dapat menonaktifkannya
href
denganjavascript: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.Plunkr
Cara lain bisa menggunakan,
routerLink
direktif dengan""
nilai kelulusan yang pada akhirnya akan menghasilkan kosonghref=""
sumber
#
jangkar di dalamhref
dapat memengaruhiAngular1
rute..mungkin mengirim Anda ke halaman default (jika ada)#
dalam sudut 1.x. Saya ingin tautan yang tidak melakukan apa pun di angular2, sama sepertihref=""
di sudut 1.x.<a href="">My Link</a>
akan melakukan itu..tapi apa yang terjadi saat ini dengannya?href="javascript:void(0);"
APAKAH berhasil untuk saya.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
href
kontennya dan jika panjangnya 0 Anda jalankanpreventDefault()
, berikut adalah sedikit contoh.Anda dapat membuatnya berfungsi di seluruh aplikasi Anda dengan menambahkan arahan ini di PLATFORM_DIRECTIVES
Berikut ini adalah plnkr dengan contoh yang berfungsi.
sumber
pointer-events
adalah kurangnya dukungan dengan IE ( caniuse ) (saya dapat memotongnya bahkan dengan IE11 cukup aneh), dan itu tidak mencegah untuk mengklik tautan dari konsol. Saya telah memutakhirkan jawaban @Pankaj karena itu yang paling mudah dari sudut pandang saya, jawaban saya hanyalah cara melakukannya dengan angular2, saya bisa membuatnya lebih mudah tetapi penyeleksi css terbatas.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:
sumber
Saya menggunakan solusi ini dengan css:
html
Semoga ini membantu
sumber
styles.css
file tingkat atas proyek Angular dan itu akan bekerja dengan baik!solusi simeyla :
sumber
Solusi yang sangat sederhana adalah tidak menggunakan tag A - sebaliknya gunakan rentang:
sumber
button
Elemen jika Anda ingindoSomething
di halaman.<button>
elemen memicu klik secara default ketikaspace
tombol ditekan. Menggunakanspan
(atau<a>
) menghapus fitur ini - sehingga tindakan keyboard tidak akan berfungsi seperti yang diharapkanIni cara sederhana
tangkap peristiwa menggelegak dan tembak jatuh
sumber
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>
sumber
Dalam kasus saya menghapus atribut href memecahkan masalah asalkan ada fungsi klik menetapkan ke.
sumber
Anda telah mencegah perilaku browser default. Tetapi Anda tidak perlu membuat arahan untuk mencapai itu.
Sangat mudah seperti contoh berikut:
my.component.html
my.component.ts
sumber
Diperbarui untuk Angular 5
sumber
Saya punya 4 solusi untuk tag anchor dummy.
4. Jika Anda menggunakan bootstrap:
sumber
Saya bertanya-tanya mengapa tidak ada yang menyarankan routerLink dan routerLinkActive (Angular 7)
Saya menghapus href dan sekarang menggunakan ini. Saat menggunakan href, itu akan menuju url pangkalan atau memuat kembali rute yang sama.
sumber
Anda perlu mencegah perilaku default acara sebagai berikut.
Dalam html
Dalam file ts
sumber
Diperbarui untuk Angular2 RC4:
Menggunakan
sumber
Solusi yang sangat sederhana
(click)="(null)"
<a class="btn btn-default" (click)="(null)">Default</a>
sumber