Question

我的 Angular 6应用程序存在此问题。在页面之间导航时，它将加载上一页的位置。我知道您可以执行以下操作：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
    constructor(private router: Router) { }

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

将在所有页面过渡上滚动到顶部。我的问题是在某些情况下，我不希望它那样做。具体来说，我有3个不想滚动的视图：问题，答案和结果。

因此，我尝试通过以下方法解决此问题：

import { Component, OnInit, PLATFORM_ID, Inject, OnDestroy } from '@angular/core';
import { Router, RoutesRecognized, NavigationEnd } from '@angular/router';
import { isPlatformServer } from '@angular/common';
import { Subscription } from 'rxjs';

@Component({
    selector: 'pyb-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, OnDestroy {
    private widgetUrls: any[] = ['questions', 'answers', 'results']
    private url: string

    private routeSubscription: Subscription

    constructor(
        private route: Router,
        @Inject(PLATFORM_ID) private platformId: Object
    ) { }

    ngOnInit() {
        this.routeSubscription = this.route.events.subscribe(event => {
            this.getCurrentUrl(event);
            this.scrollToTop(event);
        });
    }

    ngOnDestroy() {
        if (this.routeSubscription) this.routeSubscription.unsubscribe();
    }

    private scrollToTop(event: any): void {
        if (event! instanceof NavigationEnd) return;
        if (isPlatformServer(this.platformId)) return;

        let scroll = this.shouldScroll();
        if (!scroll) return;

        window.scrollTo(0, 0);
    }

    private shouldScroll(): boolean {
        if (!this.url) return true;

        let urlSegments = this.url.split('/');
        if (urlSegments.length === 1) return true;

        let lastSegment = urlSegments[urlSegments.length - 1];
        let index = this.widgetUrls.indexOf(lastSegment);

        return index === -1; // Only scroll if we are not on the widget
    }

    private getCurrentUrl(event: any): void {
        if (event instanceof RoutesRecognized) {
            this.url = event.url;
        }
    }
}

这似乎有效；但有时似乎无法意识到我所处的观点，并且不起作用：/ 有谁知道这样做是否有更好的方法？

Answer 1

如果您使用的是角度6+

ViewportScroller

ViewportScroller是一项新功能，允许我们使用滚动值。

 import { ViewportScroller } from '@angular/common';

 constructor(private viewportScroller: ViewportScroller) { }
 private scrollToTop(event: any): void {
        if (event! instanceof NavigationEnd) return;
        if (isPlatformServer(this.platformId)) return;

        let scroll = this.shouldScroll();
        if (!scroll) return;

        this.viewportScroller.scrollToPosition([0, 0]);
    }

参考：https://angular.io/api/common/ViewportScroller

Angular 6在某些视图上滚动到顶部

1 个答案: