ลิงก์แฝงในเชิงมุม 2 - <a href= คิดเห็น ”> เทียบเท่า

ใน Angular 1.x ฉันสามารถทำสิ่งต่อไปนี้เพื่อสร้างลิงค์ที่ไม่ทำสิ่งใดโดยพื้นฐาน:

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

แต่แท็กเดียวกันนำทางไปยังฐานแอพใน Angular 2 อะไรที่เทียบเท่ากันใน Angular 2

แก้ไข:ดูเหมือนว่าบั๊กในเราเตอร์ Angular 2 และตอนนี้มีปัญหาแบบเปิดบน githubเกี่ยวกับเรื่องนั้น

ฉันกำลังมองหาวิธีแก้ปัญหากล่องหรือยืนยันว่าจะไม่มี

หากคุณมีAngular 5หรือสูงกว่าเพียงแค่เปลี่ยน

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

เข้าไป

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

ลิงค์จะปรากฏขึ้นพร้อมไอคอนรูปมือเมื่อวางเมาส์เหนือมันและการคลิกที่ลิงค์นั้นจะไม่ทำให้เกิดเส้นทางใด ๆ

หมายเหตุ:หากคุณต้องการเก็บพารามิเตอร์การสืบค้นไว้คุณควรตั้งค่าqueryParamsHandlingตัวเลือกเป็นpreserve:

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

angular2ที่จะเป็นเดียวกันก็ไม่ได้มีอะไรเกี่ยวข้องกับ มันเป็นแท็ก html ที่เรียบง่าย

โดยทั่วไปa(สมอ) แท็กจะแสดงผลโดยตัวแยกวิเคราะห์ HTML

แก้ไข

คุณสามารถปิดการใช้งานได้hrefโดยมีjavascript:void(0)มันไม่มีอะไรจะเกิดขึ้นกับมัน (แต่มันแฮ็ค) ฉันรู้ว่า Angular 1 จัดหาฟังก์ชันนี้นอกกรอบซึ่งดูเหมือนว่าฉันจะไม่ถูกต้องในขณะนี้

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

Plunkr

อาจใช้วิธีอื่นโดยrouterLinkสั่งด้วย""ค่าผ่านซึ่งจะทำให้เกิดช่องว่างhref=""

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

มีวิธีการทำกับ angular2 แต่ฉันไม่เห็นด้วยอย่างยิ่งว่านี่เป็นข้อผิดพลาด ฉันไม่คุ้นเคยกับ angular1 แต่ดูเหมือนว่านี่เป็นพฤติกรรมที่ผิดจริงๆแม้ว่าคุณจะอ้างว่ามีประโยชน์ในบางกรณี แต่ชัดเจนว่านี่ไม่ควรเป็นพฤติกรรมเริ่มต้นของกรอบงานใด ๆ

ความขัดแย้งกันคุณสามารถเขียนคำสั่งง่ายๆที่คว้าลิงค์ทั้งหมดของคุณและตรวจสอบhrefเนื้อหาของและถ้าความยาวของมันเป็น 0 คุณดำเนินการpreventDefault()นี่เป็นตัวอย่างเล็กน้อย

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

คุณสามารถทำให้แอปพลิเคชันของคุณทำงานได้โดยการเพิ่มคำสั่งนี้ใน PLATFORM_DIRECTIVE

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

นี่คือplnkrพร้อมตัวอย่างที่ใช้งานได้

ความปวดร้าวควรนำทางไปยังบางสิ่งดังนั้นฉันเดาว่าพฤติกรรมนั้นถูกต้องเมื่อมันผ่านเส้นทาง หากคุณต้องการสลับบางสิ่งบางอย่างในหน้ามันเป็นเหมือนปุ่ม? ฉันใช้ bootstrap ดังนั้นฉันสามารถใช้สิ่งนี้:

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

ฉันใช้วิธีแก้ปัญหานี้กับ 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>

หวังว่านี่จะช่วยได้

วิธีการแก้ปัญหา simeyla :

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

ทางออกที่ง่ายจริงๆคือไม่ใช้แท็ก - ใช้การขยายแทน:

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

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

นี่เป็นวิธีง่ายๆ

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

จับเหตุการณ์เดือดและยิงมันลง

นี่คือวิธีที่จะทำ:

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

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

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

ในกรณีของฉันการลบแอตทริบิวต์ href แก้ปัญหาตราบใดที่มีฟังก์ชั่นคลิกกำหนดให้

คุณป้องกันพฤติกรรมเบราว์เซอร์เริ่มต้น แต่คุณไม่จำเป็นต้องสร้างคำสั่งเพื่อทำให้สำเร็จ

ง่ายเหมือนตัวอย่างต่อไปนี้:

my.component.html

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

my.component.ts

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

อัปเดตสำหรับ 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();
    }
  }
}

ฉันมี 4 วิธีแก้ปัญหาสำหรับ Dummy anchor tag

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

4. หากคุณใช้ bootstrap:

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

ฉันสงสัยว่าทำไมไม่มีใครแนะนำ routerLink และ routerLinkActive (Angular 7)

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

ฉันลบ href และตอนนี้ใช้มัน เมื่อใช้ href มันจะไปที่ url ฐานหรือโหลดเส้นทางเดิมอีกครั้ง

คุณต้องป้องกันพฤติกรรมเริ่มต้นของเหตุการณ์ดังนี้

ใน html

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

ในไฟล์ ts

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

อัปเดตสำหรับ 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();
        }
    }
}

การใช้

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

ทางออกที่ง่ายจริงๆคือ (click)="(null)"

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