跟踪滚动位置并通知其他组件(Tracking scroll position and notifying other components about it)

编程入门行业动态更新时间:2024-10-25 16:20:33

有没有一种简单的方法来跟踪浏览器的滚动位置，并通知它不止一个组件。

用例：在滚动中，我希望能够根据我的位置更改页面上各种元素的类。在之前的角度版本中，通过afix插件（jQuery相同）有些可能。当然，还有一种选择是在应用程序启动时写入裸露的JS进行初始化并发出事件。听起来很肮脏，事件发射对于这类事情来说相当昂贵。

我在这里有什么选择？

更新（建议之后）：

所以，这是我的尝试：

我创建了一个组件：

import {Component} from "angular2/core"; @Component({ selector: '[track-scroll]', host: {'(window:scroll)': 'track($event)'}, template: '' }) export class TrackScrollComponent { track($event) { console.debug("Scroll Event", $event); } }

添加属性到应用程序的主要指令：

<priz-app track-scroll>

并将该组件添加为顶层组件中的一个提供者：

import {TrackScrollComponent} from "../../shared/components/track-scroll.component"; @Component({ selector: 'priz-app', moduleId: module.id, templateUrl: './app.component.html', directives: [ROUTER_DIRECTIVES, SecureRouterOutlet, AppHeader, TrackScrollComponent], providers: [AuthenticationService] })

依然没有...

另一个更新：

将track-scroll移至主模板的其中一个div元素：

现在应用程序加载完全空白的屏幕。 FUN FUN FUN ...

最终的解决方案（为我工作）。

定义一个错误： import {Directive} from "angular2/core"; @Directive({ selector: '[track-scroll]', host: {'(window:scroll)': 'track($event)'} }) export class TrackScrollDirective { track($event: Event) { console.debug("Scroll Event", $event); } } 将它作为指令添加到使用它的任何地方： directives: [TrackScrollDirective] 将该属性添加到我们想要跟踪事件的任何元素： <div class="col-md-12" track-scroll>

Is there an easy way to track the browser scroll position and notify more than a single component about it?

Use case: On scroll I want to be able to change classes of various elements on the page based upon where I am. In a previous version of angular it was somewhat possible through a plugin (same for jQuery). Of course, there is the option of writing bare JS to initialize it on application start and emit an event, but that sounds dirty, and event emission is pretty expensive for this type of thing.

What are my options here?

UPDATE (after suggestions):

Here is what I tried:

I created a component:

added an attribute to the main directive of an app:

<priz-app track-scroll>

and added the component as one of the providers in the top component:

Still nothing...

ANOTHER UPDATE:

Moved track-scroll to one of the div elements of the main template:

And now the app loads with a completely empty screen. FUN FUN FUN...

FINAL SOLUTION (that worked for me).

Define a directive: import {Directive} from "angular2/core"; @Directive({ selector: '[track-scroll]', host: {'(window:scroll)': 'track($event)'} }) export class TrackScrollDirective { track($event: Event) { console.debug("Scroll Event", $event); } } Add it as a directive everywhere that uses it: directives: [TrackScrollDirective] Add the attribute to each element we want to track the event: <div class="col-md-12" track-scroll>

最满意答案

我认为最简单的方法是每个感兴趣的组件都听滚动事件。

  @Component({
    ...
    // alternative to `@HostListener(...)`
    // host: {'(window:scroll)': 'doSomething($event)'}
  })
  class SomeComponent {
    @HostListener('window:scroll', ['$event']) 
    doSomething(event) {
      // console.debug("Scroll Event", document.body.scrollTop);
      // see András Szepesházi's comment below
      console.debug("Scroll Event", window.pageYOffset );
    }
  }
 
 plunker  
 Plunker使用@HostListener()  
 暗示：  
bootstrap(MyComponent, [
    provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);
 
 无需将其添加到每个组件directive: [...]列表。 
I think the easiest way is each interested component listening to the scroll event. 
  @Component({
    ...
    // alternative to `@HostListener(...)`
    // host: {'(window:scroll)': 'doSomething($event)'}
  })
  class SomeComponent {
    @HostListener('window:scroll', ['$event']) 
    doSomething(event) {
      // console.debug("Scroll Event", document.body.scrollTop);
      // see András Szepesházi's comment below
      console.debug("Scroll Event", window.pageYOffset );
    }
  }
 
plunker 
Plunker using @HostListener() 
Hint: 
bootstrap(MyComponent, [
    provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);
 
makes the directive universal without adding it to every components directive: [...] list.