Angular scroll to top组件是否应仅一处放置？求最优实现方案

1. 直接在根组件放置组件（你的当前方案） #

完全合理！app.component 是 Angular 应用的根组件，所有页面都会继承它的视图结构，把回到顶部组件放在这里，既避免了重复编写20多次组件代码，又能全局生效，完全符合DRY（Don't Repeat Yourself）原则。只要组件用固定定位（比如position: fixed），不会干扰页面布局，这个方案就非常实用。

2. 封装成全局指令（更灵活的显示控制） #

如果需要自定义触发逻辑（比如滚动超过一定距离才显示按钮），可以把滚动逻辑封装成指令，绑定到一个全局按钮上：

// scroll-to-top.directive.ts
import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appScrollToTop]'
})
export class ScrollToTopDirective {
  constructor(private el: ElementRef) {
    // 默认隐藏按钮
    this.el.nativeElement.style.display = 'none';
  }

  @HostListener('window:scroll')
  onWindowScroll() {
    // 滚动超过300px时显示按钮
    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    this.el.nativeElement.style.display = scrollPosition > 300 ? 'block' : 'none';
  }

  @HostListener('click')
  onClick() {
    // 平滑滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
}

然后在app.component.html里只需要加一个绑定指令的按钮：

<button appScrollToTop class="scroll-to-top-btn">回到顶部</button>

3. 服务+全局监听（逻辑与视图分离） #

如果需要在多个组件共享滚动状态，或者把逻辑和视图彻底分离，可以封装成全局服务：

// scroll.service.ts
import { Injectable, EventEmitter } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ScrollService {
  isShowScrollBtn = new EventEmitter<boolean>();

  constructor() {
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      this.isShowScrollBtn.emit(scrollTop > 300);
    });
  }

  scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
}

接着在app.component.ts中订阅服务状态，控制按钮显示：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { ScrollService } from './scroll.service';

@Component({
  selector: 'app-root',
  template: `
    <button *ngIf="showScrollBtn" (click)="scrollService.scrollToTop()" class="scroll-to-top-btn">回到顶部</button>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  showScrollBtn = false;

  constructor(public scrollService: ScrollService) {}

  ngOnInit() {
    this.scrollService.isShowScrollBtn.subscribe(isShow => {
      this.showScrollBtn = isShow;
    });
  }
}

额外优化：路由切换自动回顶 #

如果希望用户切换路由时自动回到页面顶部，可以在根组件中监听路由事件：

// app.component.ts
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
}

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