Liên kết thụ động trong Angular 2 - tương đương <a href= Khác

Trong Angular 1.x tôi có thể làm như sau để tạo một liên kết mà về cơ bản không có gì:

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

Nhưng cùng một thẻ điều hướng đến cơ sở ứng dụng trong Angular 2. Tương đương với thẻ đó trong Angular 2 là gì?

Chỉnh sửa: Có vẻ như một lỗi trong Bộ định tuyến Angular 2 và bây giờ có một vấn đề mở trên github về điều đó.

Tôi đang tìm kiếm một giải pháp vượt trội hoặc xác nhận rằng sẽ không có giải pháp nào.

Nếu bạn có Angular 5 trở lên, chỉ cần thay đổi

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

vào

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

Một liên kết sẽ được hiển thị với một biểu tượng bàn tay khi di chuột qua nó và nhấp vào nó sẽ không kích hoạt bất kỳ tuyến đường nào.

Lưu ý: Nếu bạn muốn giữ các tham số truy vấn, bạn nên đặt queryParamsHandlingtùy chọn thành preserve:

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

Điều đó sẽ giống nhau, nó không có gì liên quan angular2. Đây là thẻ html đơn giản.

Về cơ bản, athẻ (neo) sẽ được hiển thị bởi trình phân tích cú pháp HTML.

Biên tập

Bạn có thể vô hiệu hóa điều đó hrefbằng cách có javascript:void(0)nó để không có gì xảy ra với nó. (Nhưng hack của nó). Tôi biết Angular 1 đã cung cấp chức năng này ngay lập tức mà dường như không đúng với tôi.

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

Plunkr

Cách khác có thể được sử dụng, routerLinkchỉ thị với ""giá trị chuyển qua mà cuối cùng sẽ tạo ra trốnghref=""

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

Có nhiều cách để làm điều đó với angular2, nhưng tôi hoàn toàn không đồng ý đây là một lỗi. Tôi không quen thuộc với angular1, nhưng điều này có vẻ như là một hành vi thực sự sai mặc dù bạn cho rằng nó hữu ích trong một số trường hợp, nhưng rõ ràng đây không phải là hành vi mặc định của bất kỳ khuôn khổ nào.

Không đồng ý, bạn có thể viết một chỉ thị đơn giản lấy tất cả các liên kết của bạn và kiểm tra hrefnội dung của nó và nếu độ dài của nó là 0 bạn thực thi preventDefault(), đây là một ví dụ nhỏ.

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

Bạn có thể làm cho nó hoạt động trên ứng dụng của mình bằng cách thêm chỉ thị này vào PLATFORM_DIRECTIVES

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

Đây là một plnkr với một ví dụ hoạt động.

Một cơn đau nên điều hướng đến một cái gì đó, vì vậy tôi đoán hành vi này là chính xác khi nó định tuyến. Nếu bạn cần nó để chuyển một cái gì đó trên trang, nó giống nút hơn? Tôi sử dụng bootstrap để tôi có thể sử dụng:

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

Tôi đang sử dụng cách giải quyết này với 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>

Hi vọng điêu nay co ich

dung dịch simeyla :

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

Một giải pháp thực sự đơn giản là không sử dụng thẻ A - thay vào đó hãy sử dụng một khoảng:

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

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

Đây là một cách đơn giản

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

nắm bắt sự kiện sủi bọt và bắn hạ nó

Dưới đây là một số cách để làm điều đó:

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

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

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

Trong trường hợp của tôi, việc xóa thuộc tính giải quyết vấn đề miễn là có một hàm nhấp được gán cho a.

Bạn đã ngăn chặn hành vi trình duyệt mặc định. Nhưng bạn không cần phải tạo một chỉ thị để thực hiện điều đó.

Thật dễ dàng như ví dụ sau:

my.component.html

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

my.component.ts

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

Cập nhật cho 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();
    }
  }
}

Tôi có 4 giải pháp cho thẻ neo giả.

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

4. Nếu bạn đang sử dụng bootstrap:

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

Tôi tự hỏi tại sao không ai đề xuất routerLink và routerLinkActive (Angular 7)

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

Tôi đã gỡ bỏ href và bây giờ sử dụng cái này. Khi sử dụng href, nó sẽ chuyển đến url cơ sở hoặc tải lại cùng một tuyến đường.

bạn cần ngăn chặn hành vi mặc định của sự kiện như sau.

Trong html

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

Trong tập tin ts

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

Cập nhật cho 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();
        }
    }
}

Sử dụng

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

Giải pháp thực sự đơn giản là (click)="(null)"

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