在我的Angular 2应用中，当我向下滚动页面并单击页面底部的链接时，它确实会改变路由并将我带到下一页，但它不会滚动到页面顶部。因此，如果第一页很长，第二页内容很少，就会给人一种第二页缺乏内容的印象。因为只有当用户滚动到页面顶部时，内容才可见。
我可以滚动窗口到ngInit组件的页面顶部，但是，有没有更好的解决方案，可以自动处理我的应用程序中的所有路由?
当前回答
这段代码背后的主要思想是将所有访问过的url和各自的scrollY数据保存在一个数组中。每当用户放弃一个页面(NavigationStart)，这个数组就会被更新。每当用户进入一个新页面(NavigationEnd)时，我们决定是否恢复Y位置，这取决于我们如何到达这个页面。如果使用了某个页面上的引用，则滚动到0。如果使用浏览器后退/前进特性，则滚动到保存在数组中的Y。对不起，我的英语不好:)
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location, PopStateEvent } from '@angular/common';
import { Router, Route, RouterLink, NavigationStart, NavigationEnd,
RouterEvent } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'my-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
private _subscription: Subscription;
private _scrollHistory: { url: string, y: number }[] = [];
private _useHistory = false;
constructor(
private _router: Router,
private _location: Location) {
}
public ngOnInit() {
this._subscription = this._router.events.subscribe((event: any) =>
{
if (event instanceof NavigationStart) {
const currentUrl = (this._location.path() !== '')
this._location.path() : '/';
const item = this._scrollHistory.find(x => x.url === currentUrl);
if (item) {
item.y = window.scrollY;
} else {
this._scrollHistory.push({ url: currentUrl, y: window.scrollY });
}
return;
}
if (event instanceof NavigationEnd) {
if (this._useHistory) {
this._useHistory = false;
window.scrollTo(0, this._scrollHistory.find(x => x.url ===
event.url).y);
} else {
window.scrollTo(0, 0);
}
}
});
this._subscription.add(this._location.subscribe((event: PopStateEvent)
=> { this._useHistory = true;
}));
}
public ngOnDestroy(): void {
this._subscription.unsubscribe();
}
}
其他回答
Angular 6.1及更高版本:
Angular 6.1(发布于2018-07-25)通过一个名为“路由器滚动位置恢复”的特性，添加了内置支持来处理这个问题。正如Angular官方博客中所描述的，你只需要在路由器配置中启用它，如下所示:
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
此外，该博客称“预计这将成为未来主要版本的默认设置”。到目前为止，这种情况还没有发生(从Angular 11.0开始)，但最终你将不需要在代码中做任何事情，它将会正确地开箱工作。
你可以在官方文档中看到更多关于这个特性以及如何定制这个行为的细节。
Angular 6.0及更早版本:
虽然@GuilhermeMeireles的出色回答解决了最初的问题，但它引入了一个新问题，打破了向后或向前导航(使用浏览器按钮或通过代码中的位置)时预期的正常行为。预期的行为是，当您导航回页面时，它应该保持向下滚动到与单击链接时相同的位置，但在到达每个页面时滚动到顶部显然打破了这一预期。
下面的代码扩展了检测这种导航的逻辑，方法是订阅Location的PopStateEvent序列，如果新到达的页面是这种事件的结果，则跳过滚动到顶部的逻辑。
如果你返回的页面足够长，足以覆盖整个视口，滚动位置将自动恢复，但正如@JordanNelson正确指出的那样，如果页面较短，你需要跟踪原始的y轴滚动位置，并在返回页面时显式地恢复它。代码的更新版本也涵盖了这种情况，总是显式地恢复滚动位置。
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";
@Component({
selector: 'my-app',
template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
private lastPoppedUrl: string;
private yScrollStack: number[] = [];
constructor(private router: Router, private location: Location) { }
ngOnInit() {
this.location.subscribe((ev:PopStateEvent) => {
this.lastPoppedUrl = ev.url;
});
this.router.events.subscribe((ev:any) => {
if (ev instanceof NavigationStart) {
if (ev.url != this.lastPoppedUrl)
this.yScrollStack.push(window.scrollY);
} else if (ev instanceof NavigationEnd) {
if (ev.url == this.lastPoppedUrl) {
this.lastPoppedUrl = undefined;
window.scrollTo(0, this.yScrollStack.pop());
} else
window.scrollTo(0, 0);
}
});
}
}
这段代码背后的主要思想是将所有访问过的url和各自的scrollY数据保存在一个数组中。每当用户放弃一个页面(NavigationStart)，这个数组就会被更新。每当用户进入一个新页面(NavigationEnd)时，我们决定是否恢复Y位置，这取决于我们如何到达这个页面。如果使用了某个页面上的引用，则滚动到0。如果使用浏览器后退/前进特性，则滚动到保存在数组中的Y。对不起，我的英语不好:)
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location, PopStateEvent } from '@angular/common';
import { Router, Route, RouterLink, NavigationStart, NavigationEnd,
RouterEvent } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'my-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
private _subscription: Subscription;
private _scrollHistory: { url: string, y: number }[] = [];
private _useHistory = false;
constructor(
private _router: Router,
private _location: Location) {
}
public ngOnInit() {
this._subscription = this._router.events.subscribe((event: any) =>
{
if (event instanceof NavigationStart) {
const currentUrl = (this._location.path() !== '')
this._location.path() : '/';
const item = this._scrollHistory.find(x => x.url === currentUrl);
if (item) {
item.y = window.scrollY;
} else {
this._scrollHistory.push({ url: currentUrl, y: window.scrollY });
}
return;
}
if (event instanceof NavigationEnd) {
if (this._useHistory) {
this._useHistory = false;
window.scrollTo(0, this._scrollHistory.find(x => x.url ===
event.url).y);
} else {
window.scrollTo(0, 0);
}
}
});
this._subscription.add(this._location.subscribe((event: PopStateEvent)
=> { this._useHistory = true;
}));
}
public ngOnDestroy(): void {
this._subscription.unsubscribe();
}
}
最好的答案在Angular GitHub的讨论中(更改路由不会滚动到新页面的顶部)。
也许你只希望在根路由器的更改中(而不是在子路由器中)转到top。 因为你可以在f.e.选项卡中使用惰性加载加载路由)
app.component.html
<router-outlet (deactivate)="onDeactivate()"></router-outlet>
app.component.ts
onDeactivate() {
document.body.scrollTop = 0;
// Alternatively, you can scroll to top by using this other call:
// window.scrollTo(0, 0)
}
全部归功于JoniJnm(原文)
这对我来说最适合所有导航更改，包括哈希导航
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this._sub = this.route.fragment.subscribe((hash: string) => {
if (hash) {
const cmp = document.getElementById(hash);
if (cmp) {
cmp.scrollIntoView();
}
} else {
window.scrollTo(0, 0);
}
});
}
大家好，这在angular 4中是适用的。你只需要引用父节点来滚动路由器更改
layout.component.pug
.wrapper(#outlet="")
router-outlet((activate)='routerActivate($event,outlet)')
layout.component.ts
public routerActivate(event,outlet){
outlet.scrollTop = 0;
}`
推荐文章
- 如何获得参数类型从函数在Typescript
- “无法写入文件…”因为它会覆盖输入文件。”
- 检查已安装的angular-cli版本?
- TypeScript对数组进行排序
- 如何在TypeScript中声明一个固定长度的数组
- 我如何使用可选的链接与数组和函数?
- Angular:如何在不改变路由的情况下更新queryParams
- 当我通过浏览器刷新时，会出现Angular 2: 404错误
- 如何禁用ts规则为特定的行?
- Angular中的Subject vs behaviour Subject vs ReplaySubject
- Angular 2单元测试:找不到名称“describe”
- SystemJS和Webpack有什么不同?
- 如何在Angular中显示应用版本?
- 运行单个测试文件
- “declare”在“export declare class Actions”中做什么?
