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

Question

我尝试使用 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 中，因为我的 header 组件是固定的，但是我仍然没有得到任何结果，也没有错误。

谢谢

Answer 1

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

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

html, body {
    height: 100%;
}

对此

html, body {
    min-height: 100%;
}

这对我有用，希望它有所帮助!