angular2-scroll-module

这篇介绍一下，写一个自己的angular2滚动监听插件

目录结构：

　　/scrollModule:

　　　　ztw-scroll.module.ts;

　　　　scrollBind.directive.ts;

　　　　scroll.directive.ts;

　　　　scroll.service.ts;

使用：

({
  template:`
     <div ztwScrollBind>                        //ztwScrollBind用于监听body的scroll行为，可以绑定在任何一个组件上。
           <div class='block'  *ngFor='let block of blocks' 
                (scrolled)='scrolled($event)'    //滚动进入时触发。
                (leaved)='leaved($evnet)'        //离开时触发。
                 ztwScrollControl>
          </div>
  
     </div>
  
 `
})
export class  component{
  this.blocks=[1,2,3]
  scrolled(e){
     if(!e.target) return;
  }

  leaved(e){

  }
}

ztw-scroll.module.ts:

import {NgModule} from '@angular/core';
import {ScrollDirective} from './scroll.directive';
import {ScrollService} from './scroll.service';
import {ScrollBindDirective} from './scrollBind.directive';
@NgModule({
        declarations:[
                ScrollDirective,
                ScrollBindDirective
        ],
        exports:[
                ScrollDirective,
                ScrollBindDirective
        ],
        providers:[ScrollService]
})
export class ZTWScrollModule{}

在app.module中imports它。

scroll.service.ts:

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class ScrollService{
        scrollTop:Subject<number>=new Subject();
        constructor(){};
        controlNodes=[];     //储存所有的scrollControl
        name:string='bb';
        getAbsoluteTop(node){   //获得scrollControl的绝对高度。
                let top=node.offsetTop;
                if(node.offsetParent) top+=this.getAbsoluteTop(node.offsetParent);
                return top;
        }
}

scroll.directive.ts:

监听body的滚动行为。

import {Directive} from '@angular/core';
import {ScrollService} from './scroll.service';
@Directive({
        selector:'[ztwScrollBind]'
})
export class ScrollDirective{
        constructor(
                private scrollService:ScrollService
        ){
                window.onscroll=function(){
                        let topNum=document.querySelector('body').scrollTop;
                        let nodes=scrollService.controlNodes;
                        if(nodes===[])return;
                        nodes.forEach(node=>{        //动态重写每个scrollControl的绝对高度。因为每个scrollControl的绝对高度不一定是固定的。
                                let top=scrollService.getAbsoluteTop(node);
                                node.ztw_top=top;
                                node.ztw_bottom=top+node.offsetHeight;
                        })
                        scrollService.scrollTop.next(topNum);
                }
        }
}

scrollBind.directive.ts:

控制每个scrollControl。

import {Directive,Input,Output,EventEmitter,ElementRef} from '@angular/core';
import {ScrollService} from './scroll.service';
@Directive({
        selector:'[ztwScrollControl]'
})
export class ScrollBindDirective{
        @Input('ScrollBind')node:string; 
        @Output() scrolled=new EventEmitter;
        @Output() leaved=new EventEmitter;
        constructor(
                private el:ElementRef,
                private scrollService:ScrollService
                ){      }
        ngAfterViewInit(){
                let node=this.el.nativeElement;
                this.scrollService.controlNodes.push(node);
                let sendOnece=true,scrolled=false;
                let sendObj={target:node};
                this.scrollService.scrollTop.subscribe(v=>{  //给scrollControl分配一个订阅。scroll进入时触发一次scrolled，离开时触发一次leaved。
                        if(!node.ztw_top) return;
                        if(v>node.ztw_top&&v<node.ztw_bottom){
                                if(!sendOnece)return ;
                                this.scrolled.emit(sendObj);
                                sendOnece=false;
                                scrolled=true;
                        }else{
                                if(!scrolled) return;
                                this.leaved.emit(sendObj);
                                scrolled=false;
                                sendOnece=true;
                        }
                })
        }


}

　插件分享：

已分享至github:https://github.com/zhantewei2/angular2-module-share

里面还有一个前段时间，纯JS写的文本编辑器。供大家分享及指教。