Angular 2のパッシブリンク-<a href=“”>相当

Angular 1.xでは、基本的に何もしないリンクを作成するために次のことができます。

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

しかし、同じタグがAngular 2のアプリベースに移動します。Angular2のそれに相当するものは何ですか？

編集： Angular 2ルーターのバグのようですが、githubに未解決の問題があります。

すぐに使えるソリューション、またはそれがないことの確認を探しています。

お持ちの場合は角度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>

プランカー

他の方法では、最終的に空白を生成する値を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_DIRECTIVESにこのディレクティブを追加することで、アプリケーション全体で機能するようにすることができます

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

以下は、動作例を示すplnkrです。

アコーは何かにナビゲートする必要があるので、ルーティングしたときの動作は正しいと思います。ページで何かを切り替える必要がある場合は、ボタンのようなものですか？私はこれを使用できるようにブートストラップを使用します：

<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">

本当に簡単な解決策は、Aタグを使用しないことです。代わりにスパンを使用します。

<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属性を削除すると、aに割り当てられているクリック関数がある限り、問題が解決します。

デフォルトのブラウザの動作を妨げています。しかし、それを達成するためにディレクティブを作成する必要はありません。

次の例のように簡単です。

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つあります。

    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>

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>