Winkel 2, Griff der Anker-links mit href='#'

Wenn Sie auf eine Anker-link, der hat ein href='#', die Winkelgeschwindigkeit router Weg 

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

abgestimmt ist, Wie soll ich mit diesen umgehen Anker-links, so dass der Anker mit href='#' bleibt auf derselben Seite, ich.e nichts zu tun.

Beispiel Anker-tag

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

Einen Punkt Mehr zu beachten, ich habe die <base href="/" /> in der layout-Seite, so dass auf aktualisieren Winkel bleibt auf der aktuellen Seite und der Blick für die Ressourcen, die aus "/" nicht von innerhalb der aktuellen Komponente.

  • Was genau ist der Punkt, der href="#"? Oder meinst du href="#something"?
  • nur glaube ich haben einige links für die, die das href-Element wurde nicht definiert, zum Beispiel die Datenschutz-Seite, so habe ich es #, so klicken Sie auf diesen link soll nichts geschehen, sondern es leitet auf die login-Seite
InformationsquelleAutor Vinay Pratap Singh | 2017-04-07
  1. 12

    Gibt es ein paar Optionen:

    Option 1:

    Überschreiben href Attribut mit einer Richtlinie:

    @Directive({
  selector : '[href]'
})
export class MyLinkDirective {
  @Input() href: string;

  @HostListener('click', ['$event'])
  noop(event: MouseEvent) {
    if(this.href.length === 0 || this.href === '#') {
      event.preventDefault();
    }
  }
}

    Quelle

    Persönlich, ich mag diese Lösung, weil es global ist und eckig. Hier ist ein stackblitz Beispiel.

    Option 2

    Können Sie css verwenden, und Graben, die href Attribut alle zusammen:

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

    Dann Ihre inaktive links wären:

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

    Option 3

    CSS pointer-events:

    a.noop {
   pointer-events: none;
}

    Nutzung

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

    pointer-events kann Probleme auf einigen (vor allem älteren) Browsern, wenn Sie die Pflege über Sie. Sehen Sie die Kompatibilität Liste hier.

    • Ich habe als option 1 aus der ursprünglichen Quelle, aber es hat nicht funktioniert, können Sie versuchen, indem eine plunker
    InformationsquelleAutor s.alem
  2. 3

    Versuchen, diese

    href='javascript:void(0);'
    • ich habe mehrere Anker-links, ich werde nicht zu ersetzen, alle von Ihnen mit diesem, auch ich möchte zu handhaben, in einer generischen zentrale
    InformationsquelleAutor Pramod Patil
  3. 1

    Da das hinzufügen dieser Funktion ist kompliziert, ich schlage vor, Sie das Rad nicht neu erfinden, werfen Sie einen Blick auf ng2-page-scroll.

    Wenn Sie möchten, um zu untersuchen, mehr, Lesen Sie die Router & Navigation-Anleitung.

    • ich bin nicht dass die Seite scrollt, das problem ist nur: mit jedem Klick, bei denen ein Zusammenhang ist nicht definiert.
    • in diesem Fall können Sie nicht verwenden der Anker-links. Wenn Sie etwas benötigen, auf "trigger" klicken, müssen Sie die click-Ereignis. Wenn Sie etwas bauen, mit dem Winkel, die Sie brauchen, um Bedenken Sie, dass Sie sind nicht schaffen eine einfache statische html-Seite.
    InformationsquelleAutor
  4. -1

    Die Probe Weg sein könnte, das hinzufügen dieser Teil des Codes Veranstaltung.preventDefault(); in Ihrem Ereignis-Funktion ..

    wie

    Funktion fn(event) {
    event.preventDefault();
    ...

    }

    InformationsquelleAutor Damon Wu
Schreibe einen Kommentar