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寫的文本編輯器。供大家分享及指教。