要在Angular 8中恢复滚动位置,可以使用@HostListener
装饰器和window.scrollTo
方法。下面是一个示例代码,演示了如何在子组件中选择浏览器返回按钮时恢复滚动位置。
在子组件的组件类中,添加以下代码:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-child',
template: `Child Component
`,
})
export class ChildComponent {
private scrollPosition: number = 0;
@HostListener('window:scroll', ['$event'])
onScroll(event) {
this.scrollPosition = window.pageYOffset;
}
@HostListener('window:popstate', ['$event'])
onPopState(event) {
// 恢复滚动位置
window.scrollTo(0, this.scrollPosition);
}
}
在父组件的模板中,使用子组件:
这样,在子组件中选择浏览器返回按钮时,将使用保存的滚动位置来恢复滚动位置。