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写的文本编辑器。供大家分享及指教。