angular – 使用@HostListener不起作用的窗口滚动事件

发布时间：2020-12-17 17:10:24 所属栏目：安全来源：网络整理

导读：在Angular 4应用程序中向下滚动时,我遇到问题.无法检测到滚动事件. 标题放在布局组件中,我想要滚动的内容放在路径组件中.可能那是问题吗？这是我实现的代码. 在layout.component.ts中 import { Component,OnInit,HostListener,Inject } from '@angular/core

在Angular 4应用程序中向下滚动时,我遇到问题.无法检测到滚动事件.

标题放在布局组件中,我想要滚动的内容放在路径组件中.可能那是问题吗？

这是我实现的代码.

在layout.component.ts中

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

import { DOCUMENT } from "@angular/platform-browser";

@Component({

  selector: 'app-layout',templateUrl: './layout.component.html',styleUrls: ['./layout.component.css']
})

export class LayoutComponent implements OnInit {

  public navIsFixed: boolean = false;

  constructor(public router: Router,@Inject(DOCUMENT) private document: any) { }

  @HostListener('window:scroll',[ ])

    onWindowScroll(){
      const number = window.pageYOffset || 
      document.documentElement.scrollTop || 
      document.body.scrollTop || 0;
      if (number > 50) {
        this.navIsFixed = true;
      } else if (this.navIsFixed && number < 10) {
      this.navIsFixed = false;
      }
    }
}

在layout.component.html中

<div [class.fixed]="navIsFixed" class="header">

解决方法

我只是遇到了同样的问题,我所要做的就是确保组件元素实际上是滚动和放大的.具有溢出属性,值为scroll或auto.

否则只是这个工作：

@HostListener('scroll')
  public asd(): void {
  console.log('scrolling');
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!