Aqui está outra solução alternativa com referência à resposta JavierFuentes:
<a [routerLink]="['self-route', id]" fragment="some-element" (click)="gotoHashtag('some-element')">Jump to Element</a>
no 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);
}
}
Isso permite ao usuário rolar diretamente para o elemento, se o usuário acessar diretamente a página com hashtag no url.
Mas, neste caso, subscrevi a rota Fragment in, ngAfterViewChecked
mas ngAfterViewChecked()
é chamada continuamente a cada ngDoCheck
e não permite que o usuário role de volta para o topo, então routeFragmentSubscription.unsubscribe
é chamada após um tempo limite de 0 milis após a exibição ser rolada para o elemento.
Além disso, o gotoHashtag
método é definido para rolar para o elemento quando o usuário clica especificamente na tag âncora.
Atualizar:
Se url tiver querystrings, [routerLink]="['self-route', id]"
na âncora não preservará as querystrings. Tentei seguir a solução alternativa para o mesmo:
<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á em questão) assumindo que o caminho da rota espera um parâmetro como{ path: 'users/:id', ....}