加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 08:19:42 所属栏目:安全 来源:网络整理
导读:争取最好的继续:) 有没有一个简单的方法来跟踪浏览器滚动位置,并通知它比单个组件更多。 这是一个usecase: 在滚动中,我希望能够根据我在哪里更改页面上各种元素的类。在以前版本的角度,有可能通过afix插件(与jQuery相同)。当然,有一个选择是在应用程序
争取最好的继续:)

有没有一个简单的方法来跟踪浏览器滚动位置,并通知它比单个组件更多。
这是一个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})]);

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读