事件 – 跟踪滚动位置并通知其他组件(Angular2)

争取最好的继续:)

有没有一个简单的方法来跟踪浏览器滚动位置，并通知它比单个组件更多。
这是一个usecase：
在滚动中，我希望能够根据我在哪里更改页面上各种元素的类。在以前版本的角度，有可能通过afix插件(与jQuery相同)。当然，有一个选择是在应用程序启动时初始化它，并发出一个事件。声音肮脏，事件发射对于这种类型的事情来说是相当昂贵的。

我在这里有什么选择？

谢谢，

更新(建议后)：

所以，这是我试过的：

我创建了一个组件：

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

依然没有…

另一个更新：

将轨迹滚动移动到主模板的其中一个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>

现在应用程序加载完全空的屏幕。
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>

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

@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()

暗示：

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

使该指令普遍不添加到每个组件指令：[…]列表。

原文链接：https://www.f2er.com/angularjs/144860.html

事件 – 跟踪滚动位置并通知其他组件(Angular2)

猜你在找的Angularjs相关文章