Angular 2 中的被動鏈接 -<a href=“”>等效</a>

Question

在 Angular 1.x 中，我可以執行以下操作來創建一個基本上什么都不做的鏈接：

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

但是相同的標簽導航到 Angular 2 中的應用程序庫。 Angular 2 中的等價物是什么？

編輯：它看起來像是 Angular 2 路由器中的一個錯誤，現在在 github 上有一個關於這個的未決問題。

我正在尋找開箱即用的解決方案或確認不會有任何解決方案。

Answer 1

如果您有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>

Answer 2

那將是相同的，它與angular2沒有任何關系。 它是簡單的 html 標簽。

基本上a （錨）標簽將由 HTML 解析器呈現。

編輯

您可以通過在其上添加javascript:void(0)來禁用該href ，這樣就不會發生任何事情。 （但它的黑客）。 我知道 Angular 1 提供了這個開箱即用的功能，現在對我來說似乎不正確。

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

普朗克

---

其他方法可以使用， routerLink指令傳遞""值，最終將生成空白href=""

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

Answer 3

有使用 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_DIRECTIVES 中添加此指令使其在您的應用程序中工作

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

這是一個帶有示例工作的plnkr 。

Answer 4

錨點應該導航到某些東西，所以我猜它路由時的行為是正確的。 如果您需要它來切換頁面上的某些內容，它更像是一個按鈕？ 我使用引導程序，所以我可以使用這個：

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

Answer 5

我將此解決方法與 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>

希望這可以幫助

Answer 6

西梅拉溶液：

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

Answer 7

您已阻止默認瀏覽器行為。 但是您不需要創建指令來完成它。

就像下面的例子一樣簡單：

我的組件.html

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

my.component.ts

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

Answer 8

這里有一個簡單的方法

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

捕獲冒泡事件並將其擊落

Answer 9

以下是一些方法：

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

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

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

Answer 10

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

Answer 11

在我的情況下，刪除 href 屬性可以解決問題，只要有一個點擊功能分配給 a。

Answer 12

我有 4 種虛擬錨標簽解決方案。

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

4.如果您使用引導程序：

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

Answer 13

一個非常簡單的解決方案是不使用 A 標簽 - 而是使用跨度：

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

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

Answer 14

不知道為什么人們建議使用routerLink="" ，對我來說在 Angular 11 中它會觸發導航。 這對我有用：

<div class="alert">No data yet, ready to <a href="#" (click)="create();$event.preventDefault()">create</a>?</div>

Answer 15

您需要防止事件的默認行為如下。

在 html 中

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

在 ts 文件中

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

Answer 16

我想知道為什么沒有人建議 routerLink 和 routerLinkActive (Angular 7)

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

我刪除了href，現在使用它。 使用 href 時，它會轉到基本 url 或再次重新加載相同的路由。

Answer 17

真正簡單的解決方案是(click)="(null)"

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

Answer 18

您可以添加javascript :; 在屬性href中而不是routerLink =“”

<a href="javascript:;" *ngIf="item.submenu" class="m-menu__link m-menu__toggle"> some link </a>

在另一個頁面中使用use routerLink =“”時遇到問題。

Answer 19

為 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})]);