跟踪滚动位置并通知其他组件

Question

有没有一种简单的方法来跟踪浏览器滚动位置并通知多个组件？

用例：在滚动时，我希望能够根据我所在的位置更改页面上各种元素的类。在以前版本的 Angular 中，通过插件（对于 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 元素之一：

 <div class="container-fluid" track-scroll>
    <div class="row">
        <div class="col-md-12">
            <app-header></app-header>
            <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
        </div>
    </div>
</div>

现在应用程序加载一个完全空的屏幕。好玩好玩好玩…

---

最终解决方案（对我有用）。

1. 定义一个指令：

 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);
    }
}

1. 将它作为指令添加到任何使用它的地方：

 directives: [TrackScrollDirective]

1. 将属性添加到我们要跟踪事件的每个元素：

 <div class="col-md-12" track-scroll>

原文由 Shurik Agulyansky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

   @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 );
    }
  }

笨蛋

使用 @HostListener()

暗示：

 bootstrap(MyComponent, [
    provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);

使指令具有通用性，而无需将其添加到每个组件 directive: [...] 列表中。

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议