Angular 2中的自动滚动

17 浏览
0 Comments

Angular 2中的自动滚动

我在Angular 2中遇到一个问题，将路由从一个页面转到另一个页面时并没有自动滚动到新页面的顶部。我了解到Angular 1允许在HTML元素上添加一个autoscroll属性，其他人也想出了一些简单的javascript（例如window.scroll(0, 0)）来强制将页面滚动到顶部。

然而，我不确定如何在Angular 2中完成这个功能。有没有人知道如何实现这个

？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

你可以在这里看到： https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#events-anchor，自Angular 2.0.0以来，必须使用"router.events.subscribe"。

因此，一个良好的自动滚动到页面顶部的解决方案是拥有一个像这样的AppComponent：

import {Component} from '@angular/core';
import {Router, NavigationEnd} from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private router: Router) {
        router.events.subscribe((val) => {
            if (val instanceof NavigationEnd){
                window.scrollTo(0,0);
            }
        });
    }
}

0
0 Comments

更新

目前没有自动化的方法。

请参见Angular 2中使用subscribe函数在新路由器(rc 1)上的typescript错误

请参见https://github.com/angular/angular/issues/6595#issuecomment-244232725

class MyAppComponent {
  constructor(router: Router) {
    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          // you can use DomAdapter
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(element); }
        }
      }
    });
  }
}

更新

在新的路由器V3-beta.2中，您可以通过router links和router navigation传递片段

它应该会滚动到该位置，但也会将#top添加到URL中(尚未进行测试)

更新

原始的

存在一个开放的问题https://github.com/angular/angular/issues/6595

一个解决方法(在https://github.com/angular/angular/issues/6946中提到)

注入路由器，订阅路由更改并调用向上滚动：

>= RC.x

router.changes.subscribe() => {
  window.scrollTo(0, 0);
});

beta

router.events
.filter(e => e instanceof NavigationEnd)
.subscribe(() => {
  window.scrollTo(0, 0);
});

0