({

  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){

  }

}

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{}

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;

	}

}

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);

		}

	}

}

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;

			}

		})

	}

}