事件 – 跟踪滚动位置并通知其他组件(Angular2)
发布时间:2020-12-17 08:19:42 所属栏目:安全 来源:网络整理
导读:争取最好的继续:) 有没有一个简单的方法来跟踪浏览器滚动位置,并通知它比单个组件更多。 这是一个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> 现在应用程序加载完全空的屏幕。 最终解决方案(对我有用)。 >定义矫正方法: 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 暗示: bootstrap(MyComponent,[ provide(PLATFORM_DIRECTIVES,{useValue: [TrackScrollDirective],multi:true})]); 使该指令普遍不添加到每个组件指令:[…]列表。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |