Ich möchte meiner Angular2-Seite einige Links hinzufügen, die beim Klicken zu bestimmten Positionen innerhalb dieser Seite springen , wie dies bei normalen Hashtags der Fall ist . Die Links wären also so etwas wie
/users/123#userInfo
/users/123#userPhoto
/users/123#userLikes
etc.
Ich glaube nicht, dass ich HashLocationStrategy brauche, da ich mit der normalen Angular2-Methode einverstanden bin, aber wenn ich direkt hinzufüge, würde der Link tatsächlich zum Stamm springen, nicht irgendwo auf derselben Seite. Jede Richtung wird geschätzt, danke.
123
in der Frage ist) unter der Annahme, dass der Routenpfad einen Parameter wie{ path: 'users/:id', ....}
01
oder100
nicht gültig CSS - Selektoren sind. Möglicherweise möchten Sie einen Buchstaben oder etwas hinzufügen, um ihn zu einem gültigen Selektor zu machen. Sie würden also immer noch01
als Fragment durchgehen, aber dasid
müsste so etwas seind01
unddocument.querySelector('#d'+id)
würde somit übereinstimmen.Obwohl Günters Antwort richtig ist, deckt sie nicht den "Sprung zum" Anker-Tag-Teil ab .
Daher zusätzlich zu:
... fügen Sie in der Komponente (übergeordnet), in der Sie ein "Sprung zu" -Verhalten benötigen, Folgendes hinzu:
Bitte beachten Sie, dass dies eine Problemumgehung ist ! Befolgen Sie dieses Github-Problem für zukünftige Updates. Dank an Victor Savkin für die Bereitstellung der Lösung!
quelle
"['../faq']"
als Wert angeben, sonst wird versucht, zu / faq / faq / # anchor zu springen, insteaf von / faq / # anchor. Ist dies der richtige Weg, oder gibt es einen eleganteren Weg, auf die aktuelle Seite in Routerlink zu verweisen? Auchdocument.querySelector("#" + tree.fragment);
gibt mir keine gültigen Selektor Fehler. Sind Sie sicher, dass dies korrekt ist? Vielen Dank<a [routerLink]="['/faq']" fragment="section6">
?Tut mir leid, dass ich etwas spät geantwortet habe. In der Angular Routing-Dokumentation gibt es eine vordefinierte Funktion, die uns beim Routing mit einem Hashtag zum Seitenanker hilft, dh anchorScrolling: 'enabled'
Schritt 1: - Importieren Sie zuerst das RouterModule in die Datei app.module.ts: -
Schritt 2: - Gehen Sie zur HTML-Seite, erstellen Sie die Navigation und fügen Sie zwei wichtige Attribute wie [routerLink] und Fragment hinzu, um die jeweiligen Div-IDs abzugleichen : -
Schritt 3: - Erstellen Sie einen Abschnitt / Div, indem Sie den ID-Namen mit dem Fragment abgleichen : -
Als Referenz habe ich das folgende Beispiel hinzugefügt, indem ich eine kleine Demo erstellt habe, die zur Lösung Ihres Problems beiträgt.
quelle
scrollPositionRestoration: 'enabled',
unter anchorScrolling-Option hinzufügen :)Ein bisschen spät, aber hier ist eine Antwort, die funktioniert hat:
Und in der Komponente:
Das Obige scrollt nicht automatisch zur Ansicht, wenn Sie bereits auf einer Seite mit einem Anker landen. Daher habe ich die obige Lösung in meinem ngInit verwendet, damit es auch damit funktioniert:
Stellen Sie sicher, dass Sie Router, ActivatedRoute und NavigationEnd am Anfang Ihrer Komponente importieren, und alles sollte einsatzbereit sein.
Quelle
quelle
document.querySelector ( "#" + f )
gibt mir einen Fehler, weil er einen Selektor erwartet, keinen String.element.scrollIntoView()
(ohneelement
an die Funktion zu übergeben). Verwenden Sie Folgendes, um es glatt zu machen :element.scrollIntoView({block: "end", behavior: "smooth"})
.onAnchorClick()
wir innerhalb einen Booleschen Wert an scrollIntoView übergeben müssen :if (element) { element.scrollIntoView(true); }
. Jetzt kann ich zweimal auf den gleichen Link klicken und scrollen funktioniertKeine der vorherigen Antworten hat bei mir funktioniert. In einem letzten Versuch habe ich in meiner Vorlage versucht:
Mit diesem in meiner .ts:
Und es funktioniert wie erwartet für interne Links. Hierbei werden keine Ankertags verwendet, sodass die URL überhaupt nicht berührt wird.
quelle
Die oben genannten Lösungen haben bei mir nicht funktioniert ... Dieser hat es geschafft:
Bereiten Sie sich zunächst
MyAppComponent
auf das automatische Scrollen in ngAfterViewChecked () vor ...Navigieren Sie dann zum
my-app-route
Senden einesprodID
Hashtagsquelle
Alle anderen Antworten funktionieren mit Angular Version <6.1. Wenn Sie jedoch die neueste Version haben, müssen Sie diese hässlichen Hacks nicht ausführen, da Angular das Problem behoben hat.
Hier ist der Link zur Ausgabe
Alles, was Sie tun müssen, ist
scrollOffset
die Option des zweiten Argumentes derRouterModule.forRoot
Methode.quelle
Verwenden Sie dies für das Routermodul in
app-routing.module.ts
:Dies wird in Ihrem HTML sein:
quelle
In der HTML-Datei:
In der ts-Datei:
quelle
Da die Fragment-Eigenschaft immer noch kein Anker-Scrollen bietet, hat diese Problemumgehung den Trick für mich getan:
quelle
Zusätzlich zu Kalyoyans Antwort ist dieses Abonnement an den Router gebunden und bleibt so lange bestehen, bis die Seite vollständig aktualisiert ist. Stellen Sie beim Abonnieren von Router-Ereignissen in einer Komponente sicher, dass Sie sich in ngOnDestroy abmelden:
quelle
Ich habe das gerade auf meiner eigenen Website zum Laufen gebracht, also dachte ich, es würde sich lohnen, meine Lösung hier zu veröffentlichen.
Stellen Sie dann in Ihrer Komponente Folgendes sicher:
quelle
element.scrollIntoView()
oder zu schreibenelement.scrollIntoView(true)
. Ihre Version wurde nicht für mich kompiliert (möglicherweise wegen strictNullChecks?).Nachdem ich alle Lösungen gelesen hatte, suchte ich nach einer Komponente und fand eine, die genau das tut, was die ursprüngliche Frage verlangte: Scrollen zu Ankerlinks. https://www.npmjs.com/package/ng2-scroll-to
Bei der Installation verwenden Sie folgende Syntax:
Es hat wirklich gut für mich funktioniert.
quelle
Eine einfache Lösung, die für Seiten ohne Abfrageparameter funktioniert, ist Browser-Vorwärts- / Rückwärts-, Router- und Deep-Linking-kompatibel.
Das Zeitlimit besteht einfach darin, dass die Seite alle dynamischen Daten laden kann, die durch eine * ngIf "geschützt" sind. Dies kann auch verwendet werden, um beim Ändern der Route zum Anfang der Seite zu scrollen. Geben Sie einfach ein Standard-Tag für den oberen Anker an.
quelle
Hier ist eine weitere Problemumgehung unter Bezugnahme auf die Antwort von JavierFuentes:
im Skript:
Auf diese Weise kann der Benutzer direkt zum Element scrollen, wenn der Benutzer direkt auf der Seite mit dem Hashtag in der URL landet.
Aber in diesem Fall habe ich Route Fragment in abonniert, wird
ngAfterViewChecked
aberngAfterViewChecked()
kontinuierlich aufgerufenngDoCheck
und es erlaubt dem Benutzer nicht, nach oben zu scrollen.routeFragmentSubscription.unsubscribe
Dies wird nach einer Zeitüberschreitung von 0 Millis aufgerufen, nachdem die Ansicht zum Element gescrollt wurde.Zusätzlich wird eine
gotoHashtag
Methode definiert, um zum Element zu scrollen, wenn der Benutzer speziell auf das Ankertag klickt.Aktualisieren:
Wenn die URL Querystrings enthält, werden die Querystrings
[routerLink]="['self-route', id]"
im Anker nicht beibehalten. Ich habe versucht, die gleiche Problemumgehung zu finden:quelle
Dieser arbeitet für mich !! Damit das Tag dynamisch verankert wird, müssen Sie warten, bis es gerendert ist
HTML:
Meine ts-Datei:
Vergessen Sie nicht , dass zu importieren
ViewChildren
,QueryList
etc .. und einige Konstruktor hinzufügenActivatedRoute
!!quelle
Im Gegensatz zu anderen Antworten würde ich zusätzlich auch hinzufügen ,
focus()
zusammen mitscrollIntoView()
. Außerdem verwende ich,setTimeout
da es sonst beim Ändern der URL nach oben springt. Ich bin mir nicht sicher, was der Grund dafür war, aber es scheintsetTimeout
dies die Problemumgehung bewirkt.Ursprung:
Ziel:
Typoskript:
quelle
Ich hatte das gleiche Problem. Die Lösung: Verwenden des View Port Scroller https://angular.io/api/common/ViewportScroller#scrolltoanchor
- app-routing.module.ts Code:
- Komponenten-HTML
- Komponentencode:
quelle
Wenn es nicht wichtig ist, diese Element-IDs an die URL anzuhängen, sollten Sie sich diesen Link ansehen:
Winkel 2 - Ankerverknüpfungen zum Element auf der aktuellen Seite
quelle
Ich habe gerade ein sehr nützliches Plugin getestet, das in nmp verfügbar ist - ngx-scroll-to , was für mich großartig funktioniert. Es ist jedoch für Angular 4+ konzipiert, aber vielleicht findet jemand diese Antwort hilfreich.
quelle
Ich habe die meisten dieser Lösungen ausprobiert, aber es gab Probleme beim Verlassen und Zurückkommen mit einem anderen Fragment, das nicht funktionieren würde. Deshalb habe ich etwas anderes gemacht, das zu 100% funktioniert, und den hässlichen Hash in der URL beseitigt.
Hier ist ein besserer Weg als das, was ich bisher gesehen habe.
quelle