Angular 8 @HostListener('window:scroll', []) 不工作

Posted 2023-02-22

【中文标题】Angular 8 @HostListener(\'window:scroll\', []) 不工作

【英文标题】：Angular 8 @HostListener('window:scroll', []) not workingAngular 8 @HostListener('window:scroll', []) 不工作

【发布时间】：2020-03-27 14:44:08

【问题描述】：

我尝试使用 HostListener 来跟踪滚动位置以更改标题的颜色。

我的头部组件如下，

import  Component, OnInit, Input, HostListener, Inject  from '@angular/core';
import  DOCUMENT  from '@angular/common';

@Component(
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
)
export class HeaderComponent implements OnInit 

constructor(@Inject(DOCUMENT) private document: Document)  

  ngOnInit() 
  

  @HostListener('window:scroll', [])
  onWindowScroll() 
    console.log(window.scrollY);
  

但是当我滚动时，我没有在控制台中看到任何日志。

我尝试将 HostListener 放在主 app.component 中，因为我的标题组件已修复，但是我仍然没有得到任何结果，也没有错误。

谢谢

【问题讨论】：

您是否确保您的HeaderComponent 具有足够高的高度以允许滚动？ （如果没有，则永远不会触发）

我现在也遇到了同样的问题

@christian 标题组件的高度为 100%，并且位置固定在屏幕顶部。我确实怀疑这可能是问题所在，所以我将 HostListener 添加到主 app.component，但仍然没有得到任何结果

将高度设置为绝对值，例如 2000px，然后尝试一下。

@christian 那么在这种情况下，我需要将 HostListener 放在 body 上吗？我已经在应用程序组件中尝试过，但它不起作用

【参考方案1】：

在您正在处理的组件的 .ts 文件中：

import Component, OnInit, HostListener, Inject from '@angular/core';
import DOCUMENT from "@angular/common";

...
constructor(
    @Inject(DOCUMENT) private document: Document
)
... after ngOnIt :
@HostListener('window:scroll', [])
onWindowScroll() 
    console.log(window.scrollY);

确保文件足够长，并且当您向下滚动视口时，您应该会在控制台中看到整数。

【参考方案2】：

这是因为来自 styles.scss 的全局样式

从styles.scss改变高度到最小高度

html, body 
    height: 100%;

到这里

html, body 
    min-height: 100%;

这对我有用，希望对您有所帮助！