javascript - 在 Angular2 中,检测组件滚动的最简单方法是什么

标签 javascript angularjs angular

我将 Angular2 与 Typescript 和 HTML5 结合使用。

当滚动发生时,我希望它调用我的组件中的函数。

通常在 Angular 1 中我会在滚动条上放置一个观察者。 我该如何为 Angular2 执行此操作?

这是我当前的尝试:

  @HostListener('scroll', ['$event']) private onScroll($event:Event):void {
        console.log("Scrolling occurred!");
   };

但是 console.log 没有被命中。

您能否提供该问题的 html 和 typescript 答案。

谢谢

最佳答案

您可以使用rxjs来处理该事件:

import {Observable} from 'rxjs';

let source = Observable.fromEvent(document, 'scroll');
let subscription = source.subscribe(e => console.log('scroll', e));

现在,每次发生滚动时,源都会发出一个您可以监听的事件。

参见: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-from-event

关于javascript - 在 Angular2 中,检测组件滚动的最简单方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40692779/

相关文章:

Angular2 回调与 Promise/Observable

javascript - 如何在 ES6 上导入新的 mui.Styles.ThemeManager()?

javascript - 方法论方法 - json 字符串/输出

javascript - 加载脚本时显示 'Loading' 图标

javascript - 验证 Angular 1.5 中的自定义组件

javascript - AngularJS - 下拉列表不保留所选值

javascript - AngularJS HTTP POST

Angular2 - 如何使用带有动态 url 的路由器

使用 ngxs/store @select 进行 Angular Testing 会给出错误 : "SelectFactory not connected to store!"

javascript - promise 并修改返回值