角6滚动到顶部的一些看法(Angular 6 scroll to top on some views

我有我的角 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 scroll to top on some views