咨询Angular 5路由切换时滚动到顶部的默认Angular属性

好问题！在Angular 5中，确实没有像Angular 6+那样直接提供scrollPositionRestoration这种一键配置的原生属性，但我们可以利用Angular核心库自带的Router事件监听和Renderer2服务来实现路由切换时自动滚动到顶部，完全不需要第三方工具或者直接调用window.scroll这类原生JS函数。

具体实现步骤 #

我们可以在根组件（通常是AppComponent）中通过监听路由导航完成事件，结合Angular原生的Renderer2服务来设置滚动位置：

• 首先在组件中注入Router和Renderer2服务
• 监听NavigationEnd事件（路由切换完成时触发）
• 使用Renderer2设置页面元素的scrollTop属性为0

代码示例 #

import { Component, OnInit, Renderer2 } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private renderer: Renderer2 // Angular原生DOM操作服务
  ) {}

  ngOnInit() {
    // 过滤出路由导航完成的事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 使用Renderer2设置滚动到顶部，避免直接操作window
      this.renderer.setProperty(document.documentElement, 'scrollTop', 0);
      this.renderer.setProperty(document.body, 'scrollTop', 0);
    });
  }
}

为什么这是原生方案？ #

• Renderer2是Angular核心库提供的官方DOM操作服务，属于Angular原生API，不是第三方工具
• 我们没有直接调用window.scroll或el.scrollIntoView这类原生JS函数，而是通过Angular封装的方式操作DOM属性，完全符合你的需求

补充：如果你使用的是Angular 6及以上版本 #

如果是Angular 6+，官方提供了更简洁的原生配置项scrollPositionRestoration，直接在路由模块中配置即可：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的路由配置项
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'top' // 路由切换时自动滚动到顶部
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

内容的提问来源于stack exchange，提问作者Pranab V V