大佬教程收集整理的这篇文章主要介绍了angular – 使用@HostListener不起作用的窗口滚动事件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
标题放在布局组件中,我想要滚动的内容放在路径组件中.可能那是问题吗?
这是我实现的代码.
在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">
以上是大佬教程为你收集整理的angular – 使用@HostListener不起作用的窗口滚动事件全部内容,希望文章能够帮你解决angular – 使用@HostListener不起作用的窗口滚动事件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。