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

140

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.

s.alem
sumber
Kamu masih bisa. Itu hanya html. Adakah penggunaan khusus untuk itu?
Sasxa
Ya, ini masih html valid, tetapi efeknya tidak sama dengan Angular 1.x.
s.alem
1
Apakah Anda sudah mencoba <a>, tanpa "html"?
Sasxa
3
Ya, tetapi browser tidak memperlakukannya dengan cara yang sama. Saya tahu saya bisa mengesampingkan efek kursor dengan css, dan menetapkan pointer ke semua atag. Tapi itu terlihat berantakan.
s.alem
3
Pendapat saya adalah bahwa cara ng1 adalah cara yang salah (: Perilaku default harus seperti di html standar ...
Sasxa

Jawaban:

187

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>
Emiel Koning
sumber
2
Ini berhasil diterjemahkan [routerLink]=""sebagai <a href="null" (click)="myFunction()">My Link</a>Angular 5 di Chrome 64.
Zymotik
3
Saya dapat mengkonfirmasi hal yang sama [routerLink]=""/ href="null"berfungsi di IE 11
Zymotik
1
<a [routerLink)="" (click)="passTheSalt()"> Klik saya </a> berfungsi di angular7. Saya melihat <a (click)="passTheSalt()"> Klik saya </a> tanpa routerLInk juga berfungsi di angular7. apa cara yang lebih baik untuk membuat tautan anchor pasif menggunakan [routerLink] atau tidak ada routerLink?
Ian Poston Framer
1
@IanPostonFramer Ketika saya menghapus [routerLink]="", teks Click me tidak ditampilkan sebagai tautan dan tidak menampilkan ikon kursor tangan.
Emiel Koning
5
PEMBERITAHUAN: ini akan mengatur ulang params URL Anda. pembeli berhati-hatilah.
Stavm
88

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>
Pankaj Parkar
sumber
@ s.alem apa pun yang Anda katakan, bahwa memiliki #jangkar di dalam hrefdapat memengaruhi Angular1rute..mungkin mengirim Anda ke halaman default (jika ada)
Pankaj Parkar
Saya tahu efek #dalam sudut 1.x. Saya ingin tautan yang tidak melakukan apa pun di angular2, sama seperti href=""di sudut 1.x.
s.alem
@ s.alem jadi <a href="">My Link</a>akan melakukan itu..tapi apa yang terjadi saat ini dengannya?
Pankaj Parkar
1
[routerLink] = "" akan menghapus parameter permintaan dari rute Anda, ini kemungkinan bukan yang Anda inginkan. Anda dapat menggunakan preserve params query, tetapi sepertinya ini terlalu jauh
narthur157
2
Namun, opsi 1: href="javascript:void(0);"APAKAH berhasil untuk saya.
Paul Carlton
21

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.

Eric Martinez
sumber
Suara positif untuk solusi global, sudut, tapi saya tidak menerimanya sebagai jawaban yang benar karena seperti yang saya katakan, saya hanya mencari solusi kotak keluar, sampai mereka mengkonfirmasi tidak akan ada atau sampai saya benar-benar membutuhkan Itu. Tapi tetap terima kasih banyak.
s.alem
2
Masalahnya pointer-eventsadalah 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.
Eric Martinez
1
Ini tampaknya memutus tautan tab bootstrap (seperti <a href="#tab-id">)
xd6_
Di modul mana fungsi bootstrap berada?
Jun711
16

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>
Jens Alenius
sumber
1
Saya suka solusi ini. Jika Anda ingin kursor ditampilkan, tambahkan style = "cursor: pointer".
pemain baru
Dalam banyak situasi solusi yang baik, namun perlu diingat bahwa tombol memiliki dimensi lebih besar dari sekadar jangkar berbasis teks.
yankee
@Yankee Anda dapat mengubahnya dalam css, tapi saya tidak merekomendasikan ... kenyataannya adalah, tombol adalah tombol, dan tautan adalah tautan ... terlalu menyedihkan webnya tidak putih atau hitam.
Ayyash
11

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

Sabri Aziri
sumber
1
Ini adalah solusi yang lebih baik karena ini terutama efek visual yang hilang. Anda dapat meletakkan CSS ini di styles.cssfile tingkat atas proyek Angular dan itu akan bekerja dengan baik!
9

solusi simeyla :

<a href="#" (click)="foo(); false">
<a href="" (click)="false">
ali-myousefi
sumber
Ini tampaknya menjadi solusi paling sederhana dan paling elegan.
Purple Piranha
Jawaban sederhana 👍
SUHAIL KC
5

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;
}
Jonathan
sumber
Anda seharusnya tidak melakukan itu dalam arti sematic markup. Gunakan buttonElemen jika Anda ingin doSomethingdi halaman.
Michael Kühnel
<button>elemen memicu klik secara default ketika spacetombol ditekan. Menggunakan span(atau <a>) menghapus fitur ini - sehingga tindakan keyboard tidak akan berfungsi seperti yang diharapkan
Drenai
4

Ini cara sederhana

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

tangkap peristiwa menggelegak dan tembak jatuh

born2net
sumber
Mengapa tidak menggunakan jangkar itu sendiri untuk mencegah perilaku default? Seperti dijelaskan di sini: stackoverflow.com/a/44465069/702783 Sepertinya lebih sedikit »peretasan« bagi saya.
Michael Kühnel
4

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>

Sal
sumber
3

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

Michał Ignaszewski
sumber
3

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);
}
Michael Kühnel
sumber
3

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();
    }
  }
}
CBarr
sumber
3

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>
Nabin Kumar Khatiwada
sumber
0

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.

Otak monster
sumber
0

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..
}
U_R_Naveen UR_Naveen
sumber
-1

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})]);
geejay
sumber
-1

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

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

Grigson
sumber
mungkin ada komentar mengapa technick itu buruk?
grigson
1
Menulis klik di mana-mana dalam kode ketika Anda tidak ingin klik buruk
Jens Alenius
2
tapi inilah yang ingin saya lakukan: tandai tempat dalam kode sebagai "tidak ada klik" yang bisa, tetapi dukung sintaks baru. Konstruksi seperti onclick = "javascript: void" benar-benar jelek. Dan href = "#" tidak dapat diandalkan, karena mereka dapat melompati viewport Anda ke atas. Jadi saya tidak bisa melihat alternatif yang lebih baik
grigson
Saya suka solusi Anda. Terima kasih.
Mai Hữu Lợi
Periksa jawaban baru saya. Jika Anda tidak ingin orang bernavigasi dengan tombol 'ketik'
Jens Alenius