Açısal 2'deki Pasif Bağlantı - <a href=tıkaltma> eşdeğeri

Açısal 1.x temelde hiçbir şey yapmayan bir bağlantı oluşturmak için aşağıdakileri yapabilirsiniz:

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

Ancak aynı etiket, Açısal 2'deki uygulama tabanına gider. Açısal 2'deki eşdeğer nedir?

Edit: Angular 2 Router bir hata gibi görünüyor ve şimdi github bu konuda açık bir sorun var.

Kutudan çıkmış bir çözüm veya herhangi bir olmayacağına dair bir onay arıyorum.

Eğer varsa Açısal 5 veya üzeri, sadece değişimi

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

içine

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

Fareyle üzerine gelindiğinde bir bağlantı el simgesi ile gösterilir ve tıklandığında rota tetiklenmez.

Not: Sorgu parametrelerini korumak istiyorsanız, queryParamsHandlingseçeneği şu şekilde ayarlamanız gerekir preserve:

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

Bu aynı olacak, hiçbir ilgisi yok angular2. Basit html etiketidir.

Temel olarak a(çapa) etiketi HTML ayrıştırıcısı tarafından oluşturulur.

Düzenle

Buna hrefsahip javascript:void(0)olarak devre dışı bırakabilirsiniz, böylece üzerinde hiçbir şey olmaz. (Ama hack). Angular 1'in şu anda benim için doğru görünmeyen bu işlevselliği sağladığını biliyorum.

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

Plunkr

Etrafında başka bir yol kullanmak olabilir , sonuçta boş üretecek routerLinkgeçiş ""değeri ile direktifhref=""

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

Açısal2 ile yapmanın yolları vardır, ancak bunun bir hata olduğuna kesinlikle katılmıyorum. Açısal1'e aşina değilim, ancak bazı durumlarda yararlı olduğunu iddia ettiğiniz halde bu gerçekten yanlış bir davranış gibi görünüyor, ancak açıkça bu herhangi bir çerçevenin varsayılan davranışı olmamalıdır.

Anlaşmazlıkları bir kenara bırakarak, tüm bağlantılarınızı alan basit bir yönerge yazabilir ve hrefiçeriğini kontrol edebilirsiniz preventDefault().

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

PLATFORM_DIRECTIVES içine bu yönergeyi ekleyerek başvurunuz genelinde çalışmasını sağlayabilirsiniz

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

İşte bir bir örnek çalışan plnkr .

Bir achor bir şeye gitmelidir, bu yüzden yönlendirdiğinde davranışın doğru olduğunu düşünüyorum. Sayfadaki bir şeyi değiştirmek için daha fazla bir düğme gibi mi? Bunu kullanabilmek için bootstrap kullanıyorum:

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

Bu geçici çözümü css ile kullanıyorum:

/*** 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>

Bu yardımcı olur umarım

simeyla çözümü :

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

Gerçekten basit bir çözüm bir A etiketi kullanmak değildir - bunun yerine bir span kullanın:

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

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

İşte basit bir yol

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

köpüren olayı yakala ve vur

İşte bunu yapmanın bazı yolları:

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

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

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

Benim durumumda bir a tıklama fonksiyonu olduğu sürece href özniteliğini silmek sorunu çözmek.

Varsayılan tarayıcı davranışını engellediniz. Ancak bunu başarmak için bir yönerge oluşturmanız gerekmez.

Aşağıdaki örnek gibi kolaydır:

my.component.html

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

my.component.ts

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

Açısal 5 için güncellendi

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

Sahte bağlantı etiketi için 4 çözümüm var.

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

4. Bootstrap kullanıyorsanız:

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

Neden kimsenin yönlendirici önermediğini merak ediyorumLink ve yönlendiriciLinkActive (Açısal 7)

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

Href'i kaldırdım ve şimdi bunu kullanıyorum. Href kullanırken, temel URL'ye gidiyordu veya aynı rotayı tekrar yüklüyordu.

etkinliğin varsayılan davranışını aşağıdaki gibi önlemeniz gerekir.

Html içinde

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

Ts dosyasında

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

Angular2 RC4 için güncellendi:

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

kullanma

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

Gerçekten basit bir çözüm (click)="(null)"

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