angular项目HostListenerwheel $event事件如何让页面中的某个组件内滚回到最上方

要让页面中的某个组件内滚回到最上方，你可以使用@HostListener装饰器来监听滚轮事件，然后在事件处理程序中执行相应的操作。以下是一个示例代码：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-scrollable-component',
  template: `
    <div #scrollContainer class="scroll-container">
      <!-- 内容 -->
    </div>
  `,
  styleUrls: ['./scrollable-component.component.css']
})
export class ScrollableComponentComponent {
  @HostListener('wheel', ['$event'])
  onScroll(event: WheelEvent) {
    // 判断滚轮向上滚动
    if (event.deltaY < 0 && this.scrollContainer.scrollTop > 0) {
      this.scrollContainer.scrollTop = 0; // 滚回最上方
    }
  }
}

在上面的代码中，我们使用@HostListener装饰器来监听滚轮事件，并将WheelEvent作为参数传递给onScroll方法。在onScroll方法中，我们检查滚轮的滚动方向和滚动容器的滚动位置。如果滚轮向上滚动且滚动位置大于0，则将滚动位置设置为0，从而使组件内滚回最上方。

请注意，上述代码中的scrollContainer是通过模板引用变量#scrollContainer绑定到div元素上的。这样，我们可以在组件类中直接访问该元素以执行滚动操作