Verwenden des HTML-Ankerlinkfragments in Angular 6

Lesezeit: 6 Minuten

Benutzeravatar von Suresh Karia
Suresh Karia

Ich arbeite mit einem Angular 6-Projekt, in dem ich die Hash-Location-Strategie deaktiviert/entfernt habe, die # aus der URL entfernt.

Aufgrund dieser Änderung hat der Link:

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>

nicht mehr funktioniert, überspringt es einfach die aktuelle Komponenten-URL und setzt #contactTypes nach localhost.

ich habe das gefunden Github-Problem was das Problem lösen sollte

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>

Dadurch wird #contactTypes am Ende der URL eingefügt, es wird jedoch nicht zum oberen Rand des Browsers gescrollt.

Quelle: https://github.com/angular/angular/issues/6595

Benutzeravatar von Machado
Machado

Angular 6.1 kommt mit einer Option namens anchorScrolling das lebt in router-modul’s ExtraOptions. Als die anchorScrolling Definition sagt:

Konfiguriert, ob der Router zum Element scrollen soll, wenn die URL ein Fragment enthält.

'disabled' — tut nichts (Standard).

'enabled' — scrollt zum Element. Diese Option wird in Zukunft die Standardeinstellung sein.

Ankerscrollen findet nicht auf ‘popstate’ statt. Stattdessen stellen wir die gespeicherte Position wieder her oder scrollen nach oben.

Sie können es so verwenden:

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

// then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)

  • Danke für diese Antwort. Was ich übersehen habe war, dass Sie routerLink=”./” fragment=”anchorName” verwenden müssen, Sie können href=”#anchorName” nicht verwenden.

    – PeterAusKöln

    27. November 2018 um 8:41 Uhr

  • Auch dies funktioniert nur beim ersten Klick. Funktioniert nicht am 2.

    – Phil

    20. Juni 2019 um 5:28 Uhr

  • Damit dies beim 2. Klick funktioniert, müssen Sie hinzufügen onSameUrlNavigation: 'reload' Option in den routerOptions.

    – Nitin-Avula

    16. September 2019 um 16:02 Uhr


  • Damit diese Lösung funktioniert, musste ich auch hinzufügen angle.io/api/router/ExtraOptions#scrollPositionRestoration

    – Jessi

    19. Mai 2020 um 17:18 Uhr

  • ^^^ Bestätigt, das funktioniert auch in Angular 11. Alle oben genannten Optionen funktionieren auch, dh anchorScrolling: 'enabled', onSameUrlNavigation: 'reload', scrollPositionRestoration: 'enabled'.

    – Krishnan

    15. Februar 2021 um 15:47 Uhr

Ich suchte nach einer ähnlichen Lösung und versuchte, die zu verwenden ngx-scrollen-zu Paket und stellte fest, dass es in der neuesten Version von Angular nicht funktioniert, also entschieden wir uns, nach einer anderen Option zu suchen, und stellten fest, dass wir sie verwenden können scrollIntoView

HTML Quelltext :

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Ts-Code:

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }

  • Danke, Ihre Antwort ist absolut gut und mit einem einfachen und kurzen Code leicht verständlich

    – WasiF

    5. September 2018 um 8:29 Uhr

  • können Sie für dynamische Verlinkung sorgen? Es gibt andere Antworten für diesen Zweck, aber Code ist nicht einfach

    – WasiF

    5. September 2018 um 8:38 Uhr

  • Dies ist nicht ideal, da es dem Benutzer keinen Link zur Verfügung stellt, den er mit anderen teilen kann, wie z. B. “example.org/help#installing”.

    – ANeves

    26. März 2019 um 14:44 Uhr

  • @ANeves Ja, “Das ist im Moment nicht ideal”, aber diese Funktion achorScrolling war nicht verfügbar, als ich die Frage beantwortete. da Angular 6.1 später veröffentlicht wurde. Diese Lösung kann für diejenigen hilfreich sein, die mit einer älteren Version von Angular arbeiten. Es ist großartig, dass sich die Lösungen mit jeder neuen Version von Angular weiterentwickeln

    – Joel Josef

    26. März 2019 um 17:56 Uhr


Benutzeravatar von bc100k
bc100k

Das hat bei mir funktioniert (ich verwende Angular 12.1.3):

Auf der HTML-Vorlage:

<a (click)="scrollTo('anchorId')">Scroll to another position</a>

Übergeben Sie die ID des Elements, zu dem Sie scrollen möchten (ohne das Hashtag-Symbol #) zur Funktion.

Verwenden Sie dann in Typescript .scrollIntoView um den Browser zur Position dieses Elements scrollen zu lassen.

scrollTo(element: any): void {
  (document.getElementById(element) as HTMLElement).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

  • In der HTML-Vorlage: <div id="anchorId">

    – MeerArtefakt

    10. Juni 2022 um 8:05 Uhr


Aus Gründen der Barrierefreiheit musste ich am Anfang des Dokuments einen Link setzen, um Benutzern mit einem Screenreader direkten Zugriff auf den Inhalt zu ermöglichen, wobei auf diese Weise Teile der Seite übersprungen wurden, die sich von Seite zu Seite wiederholen.

Da ich den Link benötigte, um fokussierbar zu bleiben (vorzugsweise das href-Attribut beizubehalten), da ich mich tatsächlich außerhalb des App-Stammverzeichnisses oder einer beliebigen Komponente befand (die Lösung funktioniert immer noch innerhalb einer Komponente), habe ich dazu einfaches gutes altmodisches HTML und Javascript verwendet:

<a href="./#content"
     onclick="event.preventDefault(); location.hash="content";"
     class="content-shortcut"
     title="Access page content directly"
     i18n-title
     aria-label="Access page content directly"
     i18n-label>Access page content directly</a>
  <style>
    .content-shortcut {
      position: absolute;
      opacity: 0;
      height: 0px;
      font-size: 1px;
    }

    .content-shortcut:focus,
    .content-shortcut:active {
      position: relative;
      opacity: 1;
      height: auto;
      font-size: 1em;
      display: block;
      color: black;
      background: white;
    }

  </style>

verwenden ngx Seite scrollen

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>

  • Gute Antwort, es funktioniert gut. Wenn Sie sich beispielsweise auf der Seite /home befinden, müssen Sie href=”home#anchor” eingeben. +1

    – PierreD

    1. Februar 2019 um 12:10 Uhr


  • Sie benötigen dafür keine Bibliothek, dieses Verhalten ist im Winkelrouter enthalten.

    – Machado

    21. Juni 2019 um 17:14 Uhr

Benutzeravatar von Alex Walker
Alex Walker

Wie von Nitin Avula in einem Kommentar hervorgehoben, mit routerLink Denn ein Hash-Anker funktioniert nur, wenn Sie auf einer anderen Route navigieren oder haben onSameUrlNavigation in deiner Routerkonfiguration aktiviert.

Eine Möglichkeit, dies zu umgehen, besteht darin, es loszuwerden routerLink und stattdessen verwenden this.router.navigate in deinem *.component.ts Datei mit der fragment Parameter:

HTML-

<a (click)="scrollToContactTypes()">Contact Types</a>

TypeScript –

constructor(private router: Router) { }

scrollToContactTypes() {
    this.router.onSameUrlNavigation = "reload";
    this.router.navigate(["/settings"], { fragment: "contactTypes" }).finally(() => {
        this.router.onSameUrlNavigation = "ignore"; // Restore config after navigation completes
    });
}

  • Gute Antwort, es funktioniert gut. Wenn Sie sich beispielsweise auf der Seite /home befinden, müssen Sie href=”home#anchor” eingeben. +1

    – PierreD

    1. Februar 2019 um 12:10 Uhr


  • Sie benötigen dafür keine Bibliothek, dieses Verhalten ist im Winkelrouter enthalten.

    – Machado

    21. Juni 2019 um 17:14 Uhr

Benutzeravatar von Anjana Silva
Anjana Silva

Dies ist für Angular 9, aber ich bin sicher, dass die Community davon profitieren wird,

Sie können verwenden Location im @angular/common um den aktuellen Pfad zu erhalten.

Angenommen, Sie haben das folgende Element mit einer ID zum Fokussieren

<div id="bring-me-to-the-focus">

Ich zeige hier nur extrahierte Codeblöcke.

import { Location } from '@angular/common';

constructor(private location: Location) { }

this.location.path() + '#bring-me-to-the-focus'; 

Ich bin sicher, das wird jemandem helfen 🙂

Beifall.

  • Ich denke nicht, dass dies notwendig ist, da der Router diese Funktion bietet anchorScrolling Und onSameUrlNavigation

    – giovannipds

    14. Januar 2021 um 12:51 Uhr

1449230cookie-checkVerwenden des HTML-Ankerlinkfragments in Angular 6

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy