代码之家 › 专栏 › 技术社区 › r3plica

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

angular

r3plica · 技术社区 · 6 年前

我有这个问题 角度的 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;
        }
    }
}

这似乎可行,但有时似乎不知道我在哪一种观点上,也不可行:/ 有人知道有没有更好的方法?

1 回复 | 直到 6 年前

Chellappan à®µ 6 年前

如果使用角6+

视图端口滚动条

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