An den Anfang der Seite/Komponente springen

Das Laden von Komponenten in SPAs hat sehr viele Vorteile. Einer der wenigen Nachteile ist allerdings, dass man standardmässig nicht mehr an den Anfang der Seite springt, wenn man einen Link anklickt.

Mit einem einfachen Event-Subscriber direkt auf der Root-Komponente kann man dem allerdings entgegenwirken:

export class AppComponent implements OnInit, OnDestroy{
    private routerEventSubscriber: Subscription;

    constructor(private router: Router) {}

    ngOnInit() {
        this.routerEventSubscriber = this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }

    ngOnDestroy() {
        this.routerEventSubscriber.unsubscribe();
    }

}