Voici une autre solution de contournement avec référence à la réponse JavierFuentes:
<a [routerLink]="['self-route', id]" fragment="some-element" (click)="gotoHashtag('some-element')">Jump to Element</a>
dans le script:
import {ActivatedRoute} from "@angular/router";
import {Subscription} from "rxjs/Subscription";
export class Links {
private scrollExecuted: boolean = false;
constructor(private route: ActivatedRoute) {}
ngAfterViewChecked() {
if (!this.scrollExecuted) {
let routeFragmentSubscription: Subscription;
routeFragmentSubscription = this.route.fragment.subscribe(fragment => {
if (fragment) {
let element = document.getElementById(fragment);
if (element) {
element.scrollIntoView();
this.scrollExecuted = true;
// Free resources
setTimeout(
() => {
console.log('routeFragmentSubscription unsubscribe');
routeFragmentSubscription.unsubscribe();
}, 0);
}
}
});
}
}
gotoHashtag(fragment: string) {
const element = document.querySelector("#" + fragment);
if (element) element.scrollIntoView(element);
}
}
Cela permet à l'utilisateur de faire défiler directement jusqu'à l'élément, si l'utilisateur atterrit directement sur la page ayant le hashtag dans l'url.
Mais dans ce cas, je me suis abonné à la route Fragment in ngAfterViewChecked
mais ngAfterViewChecked()
est appelée en continu pour chaque ngDoCheck
et cela ne permet pas à l'utilisateur de faire défiler vers le haut, doncrouteFragmentSubscription.unsubscribe
est appelée après un délai d'expiration de 0 millis après le défilement de la vue jusqu'à l'élément.
De plus, une gotoHashtag
méthode est définie pour faire défiler jusqu'à l'élément lorsque l'utilisateur clique spécifiquement sur la balise d'ancrage.
Mettre à jour:
Si l'url a des chaînes de requêtes, [routerLink]="['self-route', id]"
dans anchor ne conservera pas les chaînes de requêtes. J'ai essayé la solution de contournement suivante pour le même:
<a (click)="gotoHashtag('some-element')">Jump to Element</a>
constructor( private route: ActivatedRoute,
private _router:Router) {
}
...
...
gotoHashtag(fragment: string) {
let url = '';
let urlWithSegments = this._router.url.split('#');
if(urlWithSegments.length){
url = urlWithSegments[0];
}
window.location.hash = fragment;
const element = document.querySelector("#" + fragment);
if (element) element.scrollIntoView(element);
}
123
est dans la question) en supposant que le chemin de la route attend un paramètre comme{ path: 'users/:id', ....}