如何在Angular5中的每条路线单击上滚动到顶部？

在Angular5中，我们可以使用@HostListener来监听组件中DOM元素的事件。结合ElementRef可以让我们控制DOM元素的行为。下面是一个示例，演示如何在每条路由中单击时使页面滚动到顶部。

import { Component, OnInit, HostListener, ElementRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private router: Router, private el: ElementRef) { }

  ngOnInit() {
    // 监听路由变化
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 每条路由渲染完成后，自动将页面滚动到指定位置
        this.scrollToTop();
      }
    });
  }

  // 监听视口滚动事件
  @HostListener('window:scroll', [])
  onWindowScroll() {
    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    // 根据当前滚动位置来确定是否需要显示返回顶部按钮
    const button = document.getElementById('scroll-to-top');
    if (button) {
      if (scrollPosition > 500) {
        button.style.display = 'block';
      } else {
        button.style.display = 'none';
      }
    }
  }

  // 点击返回顶部按钮时执行的操作
  onScrollToTop() {
    this.scrollToTop();
  }

  // 将页面滚动到顶部
  scrollToTop() {
    const scroller = this.el.nativeElement.querySelector('.content');
    const scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    if (scrollTop > 0) {
      window.scrollTo(0, 0);
    }
  }
}

在上述代码中，我们监听了两个事件，同时实现了两个方法。

首先，我们在ngOnInit中监听路由变化事件，当每条路由渲染完成后，自动将页面滚动到指定位置。在此之后，我们使用@HostListener监听了视口滚动事件，根据当前滚动位置来确定是否需要显示返回顶部按钮。最后，在点击返回顶部按钮时执行的操作中，我们通过使用scrollTo函数实现将页面滚动到顶部。

我们需要在HTML文件中添加一个返回顶部按钮。

<button id="scroll-to-top" class="btn btn-sm btn-primary float-right" (click)="onScrollToTop()" style="display: none;">返回顶部</button>

这个按钮的点击事件将调用onScrollToTop方法来执行具体的滚动操作。