开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 8 @HostListener('window:scroll'，[])不工作

Angular 8中的@HostListener装饰器用于在指定的宿主元素上监听事件。在这种情况下，@HostListener('window:scroll', [])用于监听窗口滚动事件。

然而，如果这个@HostListener装饰器不起作用，可能有以下几个原因：

错误的使用方式：请确保@HostListener装饰器的语法正确，并且在正确的位置使用。例如，它应该被放置在组件类的方法上。
组件元素不是宿主元素：@HostListener装饰器只能用于宿主元素上，而不是组件元素本身。请确保@HostListener装饰器被放置在宿主元素上。
组件元素没有滚动条：如果组件元素没有滚动条，@HostListener('window:scroll', [])将无法触发。请确保组件元素具有滚动条。
其他事件监听器干扰：可能存在其他事件监听器干扰了@HostListener('window:scroll', [])的工作。请检查代码中是否有其他事件监听器与之冲突。

总结起来，@HostListener('window:scroll', [])不工作可能是由于错误的使用方式、组件元素不是宿主元素、组件元素没有滚动条或其他事件监听器干扰等原因导致的。请仔细检查代码，并确保以上问题都得到正确解决。

关于Angular的更多信息和相关产品，您可以访问腾讯云的官方文档和网站：

Angular官方网站：https://angular.io/
腾讯云云计算产品：https://cloud.tencent.com/product
腾讯云云原生产品：https://cloud.tencent.com/solution/cloud-native
腾讯云服务器产品：https://cloud.tencent.com/product/cvm
腾讯云数据库产品：https://cloud.tencent.com/product/cdb
腾讯云人工智能产品：https://cloud.tencent.com/product/ai
腾讯云物联网产品：https://cloud.tencent.com/product/iot
腾讯云移动开发产品：https://cloud.tencent.com/product/mobdev
腾讯云存储产品：https://cloud.tencent.com/product/cos
腾讯云区块链产品：https://cloud.tencent.com/product/baas
腾讯云元宇宙产品：https://cloud.tencent.com/product/vr

相关搜索:$(Window)函数(.scroll)不工作 window：@HostListener不触发滚动事件 @HostListener('change')不工作- Angular2 RC1 当我们删除HostListener时，Angular HTML绑定不工作 Angular 2 window.scrollTo不工作？jquery window.scroll无法正常工作 Angular 8-为什么window.scroll不能在生命周期钩子ngOnchanges()上工作？Angular 8-子routerLink不工作 Angular 4的HostListener窗口:scroll在用户停止滚动后持续触发 Angular 8-延迟加载模块不工作 PatchForm在调用Angular 8后不工作 window.scrollTo()不工作 Infow window onclick不工作 Bootstrap 4 scroll-spy不工作 Angular 8 Carousel幻灯片动画不工作 Angular 8+ Bootstrap 3汉堡菜单不工作 window.scroll不适用于angular 11和材质 javascript window.close()不工作 Angular 8:鼠标单击事件后使用HostListener查找DOM元素 bootstrap class.active在Angular 8中不工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【Angular6+】事件绑定

Angular6+ 事件绑定临近毕业开始了第二段实习，因为项目需求，技术栈从Vue转到Angular，才发现Angular已经到7了？？？？？...为事件起别名（不推荐） @Directive({ outputs: ['clicks:myClick'] // propertyName:alias }) <div (myClick)="clickMessage...., <em>HostListener</em>} from '@<em>angular</em>/core'; ......@Component({ selector: "app", template: "Increment" }) class App {} Scroll...事件 @HostListener('window:scroll', ['$event']) onScroll() { this.pageYOffset = window.pageYOffset

1.6K3 0

AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)

当然你可能会说，不不不，我就是在浏览器运行，不考虑别的。OK,我也不较劲，你当我没说，你完全可以就这么用。...落实到代码，大致是这样，首先把window对象包装成一个服务： import { Injectable } from '@angular/core'; function _window() : any...比如： import { Directive, HostListener } from '@angular/core'; @Directive({ selector: 'button[counting...比如： import { Directive, HostBinding, HostListener } from '@angular/core'; @Directive({ selector:...HostListener和HostBinding有一个简写的形式host,如下所示： import { Directive, HostListener } from '@angular/core';

1.6K6 0

Angular 中的伪事件

原文 - Angular Pseudo-Events 作者 - Shijir Tsogoo Angular 提供了一个巧妙的小功能，用于简化监听键盘事件的过程。...尽管在 Angular 模版绑定文档中提到了伪事件 pseudo-event，但是在其他地方没有进一步的文档说明。深入之前，我们看看 Angular 中的伪事件解决了什么问题。...在 @HostListener 中使用 Pseudo-Events 如同其他 DOM 事件，你可以通过 @HostListener 监听伪事件： @HostListener('keydown.control.z...KeyboardEvent) { // responds to control+z } 当然，如果宿主元素不可获取焦点，或者无论事件来自何处，你都要捕获键盘事件，你可以将事件绑定到全局元素，比如： @HostListener...译者加：某些伪事件在平台上绑定有一定差异，比如在 mac 上绑定 document:keydown.control.arrowright 不生效，在 window 上则生效

2674 0

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 中的示例，来一步步介绍自定义属性指令的相关知识。...想要监听宿主元素的 input 事件，我们可以利用 Angular 提供的 HostListener 装饰器。...HostListener HostListener 是属性装饰器，一般用来为宿主元素添加事件监听。...此外，除了监听宿主元素外，我们也可以监听 window 或 document 对象上的事件，如 @HostListener('document:click', ['$event']) 。...本文通过 CreditCardDirective 和 TooltipDirective 两个指令，介绍了 Angular 自定义属性指令所涉及的相关的基础知识，若想继续深入学习的话，可以阅读 Angular

2K3 0

AngularDart4.0 高级-属性(Attribute)指令顶

虽然highlight是比myHighlight更简洁的名字，并会工作，最佳做法是为选择器名称加上前缀，以确保它们不与标准HTML属性发生冲突。这也降低了与第三方指令名称相冲突的风险。...你的指令不工作？你记得设置@Component的指令属性吗？很容易忘记！...@HostListener('mouseenter') void onMouseEnter() { _highlight('yellow'); } @HostListener('mouseleave...color]) { _el.style.backgroundColor = color; } } 写一个控制装置来尝试可能很难想象这个指令是如何工作的。... Angular知道defaultColor绑定属于HighlightDirective，因为您使用@Input注解将其公开。刷新浏览器。编码完成后，下方演示应该如何工作。 ?

3.2K1 0

angular中，防止按钮的两次点击原

(click.once)="login()" 所以我们实现一个 click.once的指令即可： import { Directive, Input, OnDestroy, OnInit, HostListener..., Output, EventEmitter, Renderer2, ElementRef } from '@angular/core'; import { throttleTime } from 'rxjs...Subject(); private subscription: Subscription; constructor( private renderer: Renderer2, // Angular...throttleTime(this.duration) ).subscribe(e => { this.clickCall.emit(e); }); } @HostListener...(adsbygoogle = window.adsbygoogle || []).push({});

4.2K2 0

Dygraphs 中 x 轴等间距实现

在 angular 中，我们一般选择 @HostListener 进行调用。...@HostListener('window:resize') private onResize(): void { this.drawChart(); // 重新绘制 } 2.

7513 0

Angular 2 + 折腾记：(9) 初步了解指令，及动手一步一步写个自定义指令

前言指令这种东西，可以加强用户体验，减少一些重复工作; 跟着我来实现一个悬浮链接打开的指令 ---- 效果图 ?...Directive, // 创建一个指令必须依赖这个装饰器 ElementRef, // 获取原生dom的 Input, // 接收外部数据的 Renderer2, // 渲染相关的(v4+)，angular2....x 用的是Renderer(v4里面依旧标记不赞成deprecate),两者大同小异，具体看手册API的变动 HostListener, // 监听事件 } from '@angular/core...urlRegex.test(e)) { this.CreateEl('block', { data: e, type: 'url' }); } } // 事件，参数，对应的方法 @HostListener...('mouseenter', ['this.appHoverText']) mymouseenter(e) { this.CheckContentType(e); } @HostListener

4631 0

Ionic3 自定义指令

在 Angular 中有三种类型的指令组件 — 拥有模板的指令结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。...组件的概念比较大，本文讲解的是属性指令和结构指令的创建和使用，Angular官方文档创建属性指令创建一个指令可以直接使用ionic cli 工具 ionic g directive sxylight...image.png sxylight.ts 就是指令的具体实现，代码如下 import {Directive, ElementRef, HostListener, Input} from '@...selector: '[sxylight]' 是该指令在外部使用时的名称 @Input 表示一个输入属性，表示可以从父组件传值进来 @HostListener 可用于监听事件 ElementRef 可以...导入工作做好之后，就可以直接在模板中使用该指令了自定义属性指令测试自定义属性指令</

1.3K3 0

浅谈Angular

1.准备工作: ①全局安装 Angular CLI。...创建项目: 要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令： npm install -g @angular/cli ②创建工作区和初始应用:ng new 文件名 ③启动开发服务器...可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器如果要通过指令控制DOM的显隐..."['/product', '小米9',3000]">商品展示参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁...// IE下：window.event.srcElement 标准下：event.targetdiv.onclick = function (e) {var even = e || window.event

4.4K1 0

Angular 2 + 折腾记：(8) 动手写一个不怎么靠谱的上传组件

---- 所具有的功能支持的图片格式(不传参则使用默认参数) 支持的图片大小图片上传之前会被压缩(前端) -- 异步加载进来上传过程会显示loading(loading组件)--就一些css3样式.../core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms';..." *ngIf="preview">删除 ---- mit-upload.component.scss -- 组件样式(scss) @charset 'UTF-8'...mit-upload.component.ts --- 上传逻辑的实现 import { Component, OnInit, Input, Output, EventEmitter, ElementRef, HostListener...( scope.type ); if (e && scope.type.indexOf(filetype) === -1) { this.uploadDesrc = '图片格式不匹配

9781 0

ionic3应该善用组件和指令

ionic3开发框架是angular4，所以了解一下angular4的一些基础知识，能让你更好的开发应用。...其实ionic3（angualr4）和ionic2（angular2）差不多，但和ionic1（angular1）就差别非常大了，可以说基本是推倒了重来。...为实现该功能，我们需要在事件处理函数上添加@HostListener装饰器，代码改动如下： import { Directive, Input, ElementRef, HostListener }...private setStyle(color: string){ this.el.nativeElement.style.backgroundColor = color; } @HostListener...isExpand"> 一段文字效果图不上了，留待你们试验，哇咔咔。

3.5K4 0

了解 Angular 开发的内容

这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，阅读本文，是在你了解 Angular 基本知识的前提下，如果读者还不了解，请前往官网了解。...用过 vue 的读者应该对这个不默认。...此文件的内容如下： import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector...export class DirectiveConsoleDirective { constructor( public elementRef: ElementRef ) { } @HostListener...import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable

1K4 1

Angular2学习记录-给后端程序员的经验分享

之前使用Jq是 $(window).scroll(function () { indexApp.scrollBar = parseInt(document.body.scrollTop||document.documentElement.scrollTop...window.addEventListener('scroll',function () { let marginTop = document.body.scrollTop|| document.documentElement.scrollTop...server { listen 8888; server_name localhost; #charset koi8-r; #access_log logs...--study_for_backend/"},window.disqus_config=function(){this.page.url=window.location.href,this.page.identifier...=window.disqusProxy.identifier}

3.1K2 0

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

Angular是一个完全集成的框架，可以让您快速开始项目工作，无需考虑选择哪个库以及如何处理日常问题。我认为Angular是作为前端的，就像RoR是作为后端的。...CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" 所以如果你的应用程序不工作...实际上，Angular为我们提供了一些糖语，我们可以在这里使用它，所以我从另一个角度开始解释糖的工作原理。...我们需要监听组件中的DOM keypress事件并输出由此触发的Angular事件。为了收听DOM事件，Angular为我们提供了HostListener装饰器。...让我们来实现它并讨论它的工作原理： import {Component, EventEmitter, OnInit, Output, HostListener} from '@angular/core'

42.6K1 0

Angular 结合 rxjs 实现拖拽

这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，在上两篇文章中，我们学习了元素中必知重要属性和方法和 Angular 中自定义 Video 操作，没有度过的读者可先了解。...一个不错的 Idea，如果你使用 Angular 的 @angular/cdk/drag-drop 可以轻松实现，但是我们这里不使用工具。...: ElementRef; public scroll!...: any; ngAfterViewInit(): void { this.scroll = fromEvent(document, 'scroll'); this.scrollFn(); }...这里的计算 move.clientX - down.offsetX, window.innerWidth - this.video.nativeElement.offsetWidth，相关的概念也许你不是很清楚

8991 0

angular聊天IM实例|仿微信angular版|NG2案例

react版聊天室：https://blog.csdn.net/yanxinyun1990/article/details/94143575 技术架构： MVVM框架：angular8 + @angular.../components/xtnScroll/Scroll' import { NotFoundComponent } from '.....); } } } function surrounds() { setTimeout(function () { //chrome var sel = window.getSelection...elems.length = 0; })(); } }, 10); } // 定义最后光标位置 var _lastRange = null, _sel = window.getSelection...&& window.getSelection(); var _rng = { getRange: function () { if (_sel && _sel.rangeCount

3.7K4 0

【组件篇】ionic3开源组件

平时会留意一些开源组件，收藏到收藏夹里，然后一天mac电脑因为卸载window出问题导致不能不重装，然后里面的东西都没了，特别是适用于ionic2布局的angular2和普通js……so sad，现整理回一些并分享下...提醒一点，ionic3除了很方便使用ionic2及以上组件外，也很方便引入angular2或普通js的组件。这里列的基本都是ionic2，如果没有，可以自行找angular2或js的。...ionic2-autocomplete 锚点滚动列表 ionic2-alpha-scroll ionic2-indexed-scroll ionic3-index-list——群里有人发就补充上来了...ionic2-indexed-scroll 透明状态栏 ionic2-transparent-bar 多层菜单 Ionic3-MultiLevelSideMenu 滚动收缩 Ionic2-FullscreenContent

1.9K4 0

HTML粘性滑块导航页面Demo - 可自由填充内容

DOCTYPE html> <meta name="viewport" content...">Angular Other Angular something about angular { this.onScroll(); }); $(window).resize(() => { this.onResize(); }); }...).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) { newCurrentId = id

1K1 0

Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI）

写在前面在angular4项目中例子是基于之前文章：利用angular-cli构建Angular4.X项目可以参考官网：https://cipchk.github.io/ngx-weui/...更多angular指令及用法参看官网。...安装及引用安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们的font-awesome图标苦，在我们项目index.html中引用 <!...我选择固定中间按钮，使用动态绑定样式让中间部分的高度等于页面高度-底部和顶部的高度，设置overflo为scroll; 在accounting.component.ts中添加样式数据如下： contentStyle...= { // 绑定的样式 'overflow': 'scroll', 'height': window.screen.availHeight - 145 + 'px' }; 在

2.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭