Angular 2, Anker-Links mit href = '#'

Question

Griff Wenn jeden Anker Link klicken, die ein href='#' hat, den Winkel Router Weg

{ path: '', component: NologinComponent, pathMatch: 'full' } 

abgestimmt ist, Wie soll ich diese Anker-Links, so dass die Ankerstange mit href='#' bleibt auf der gleichen Seite, dh nichts tun.

Beispiel Ankertag

<a class="title-logo" href="#"><img src="/Content/Images/Image1.png"></a>

Ein weiterer Punkt zu berücksichtigen, i, so dass die <base href="/" /> in der Layoutseite verwendet haben, auf Refresh-Winkel bleibt auf der aktuellen Seite und suchen Sie die Ressourcen von „/“ nicht von innerhalb der aktuellen Komponente.

Answer 1

Es gibt ein paar Optionen sind:

Option 1:

Aufschalten href Attribut mit einer Richtlinie:

@Directive({ 
    selector : '[href]', 
    host : { 
    '(click)' : 'doNothing($event)' 
    } 
}) 
export class MyLinkDirective { 
    @Input() href: string; 

    doNothing(event) { 
    if(this.href.length === 0 || this.href === '#') { 
     event.preventDefault(); 
    } 
    } 
} 

Source

Ich persönlich mag diese Lösung, weil es ist global und eckig. Hier ist eine plunker.

---

Option 2

Sie CSS verwenden können und Graben die href alle zusammen Attribut:

a { 
    cursor: pointer; 
    user-select: none; 
} 

Dann Ihrer inaktiven Links wäre:

<a class="title-logo"><img src="/Content/Images/Image1.png"></a> 

---

Option 3

CSS pointer-events:

a.noop { 
    pointer-events: none; 
} 

Nutzungs

<a class="title-logo noop" href="#"><img src="/Content/Images/Image1.png"></a> 

pointer-events kann Probleme auf einigen (vor allem ältere) Browsern verursachen, wenn Sie uns um sie kümmern. Sie können die Kompatibilitätsliste here sehen.

Answer 2

Versuchen Sie, diese

href='javascript:void(0);' 

Answer 3

Da diese Funktionalität Hinzufügen heikel ist, empfehle ich Ihnen nicht das Rad neu zu erfinden, einen Blick auf ng2-page-scroll nehmen. Wenn Sie mehr untersuchen möchten, sollten Sie die Router & Navigation Guide lesen.