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.
^^^ 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
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
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.
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 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
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: