web-dev-qa-db-ja.com

Angular 2のプッシュリンク - <a href="">同等のもの

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

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

しかし、同じタグがAngular 2のアプリベースに移動します。Angular 2のものと同等のものは何ですか。

編集：これはAngular 2ルーターのバグのように見え、今では githubに未解決の問題があります それについて。

私は箱から出して解決策を見つけるか、それがないという確認を探しています。

angularroutingangular2-routingangular-router
96
s.alem

Angular 5以上がある場合は、単に変更してください。

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

に

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

リンクをクリックしてもルートが表示されない場合は、リンクが手のアイコンで表示されます。

119
Emiel Koning

それは同じでしょう、それはangular2に関連した何も持っていません。シンプルなhtmlタグです。

基本的にa（anchor）タグはHTMLパーサによってレンダリングされます。

編集

何も起こらないようにjavascript:void(0)を持っていることでそのhrefを無効にすることができます。 （しかしそのハック）。私はAngular 1が箱から出してすぐにこの機能を提供していたことを知っていますが、これは私には正しくないようです。

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

Plunkr

他の方法として、routerLinkディレクティブを使用して、最終的に空白の""を生成するhref=""値を渡すことができます。

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

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 の例です。

20
Eric Martinez

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

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

私は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>

お役に立てれば

10
Sabri Aziri

シメイラ解 ：

<a href="#" (click)="foo(); false">
<a href="" (click)="false">
6
ali-myousefi

本当に簡単な解決策はAタグを使わないことです - 代わりにspanを使ってください：

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

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

これが簡単な方法です

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

バブリングイベントを捉えて撃墜する

4
born2net

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
Chris Barr

ダミーアンカータグには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>
4
Nabin Kumar Khatiwada

私の場合は、href属性を削除することで、クリック関数がaに割り当てられている限り問題を解決できます。

3
Michał Ignaszewski

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

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

my.component.html

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

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}
2
Michael Kühnel

Angular2 +のコンテキスト内でこれを行うには、すべての方法があります。

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

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

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

2
Sal

誰もrouterLinkとrouterLinkActiveを提案していないのでしょうか（Angular 7）

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

私はhrefを削除し、今これを使っています。 hrefを使用しているときは、ベースURLに行くか、同じルートを再度ロードしていました。

1
Monster Brain

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

本当に簡単な解決策は(click)="(null)"です

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

0
grigson

代わりにjavascript：;を属性hrefに追加できますrouterLink = ""

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

あなたが別のページにいる間userouterLink = ""に問題があります。

0
Muhammad Al Faris