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 上吗？我已经在应用程序组件中尝试过，但它不起作用

标签： angular angular8 angular-directive

【解决方案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%;
}

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

【讨论】：