web-dev-qa-db-ja.com

Angular 8 @HostListener（ 'window：scroll'、[]）が機能しない

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に配置しようとしています。ヘッダーコンポーネントが固定されているためですが、結果もエラーもありません。

ありがとう

angularangular8angular-directive
3
DevStacker

これは、styles.scssのグローバルスタイルが原因です

Styles.scssから高さを最小高さに変更

html, body {
    height: 100%;
}

これに

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

これは私のために働いたものです、それが役に立てば幸いです！

1
Amineze