这篇介绍一下,写一个自己的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写的文本编辑器。供大家分享及指教。

angular2-scroll-module的更多相关文章

  1. jQuery右侧悬浮楼层滚动 电梯菜单

    http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...

  2. 关于angular跳转路由之后不能自动回到顶部的解决方法

    Question: angular2 scroll top on router change 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...

  3. angular2 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

    调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...

  4. [angular2]解决安装 angular-cli 报错:Cannot find module 'github-url-from-git'

    1.运行:sudo rm -rf /usr/local/lib/node_modules/npm 2.重新安装最新版本的node,最新版本的node已经集成了npm,所以无需另外安装. 3.运行:su ...

  5. Angular2学习

    1.新建项目 2.新建Model public class TodoItem { public int Id { get; set; } public string Key { get; set; } ...

  6. Angular2.0的项目架构

    Angular2.0的项目架构 一.项目服务端app a) Controller控制器 b) Router路由 c) Service服务 d) Public公共样式及脚本和图片等静态资源 e) Vie ...

  7. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  8. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  9. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  10. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

随机推荐

  1. Oracle Schema Objects——Tables——TableType

    Oracle Schema Objects Object Tables object type An Oracle object type is a user-defined type with a ...

  2. Java 之内部类

    概述 内部类修饰符 内部类的细节 局部内部类 匿名内部类及其应用 匿名内部类细节 内部类概述 将一个类定义在另一个类的里面, 里面的那个类就称为内部类(内置类, 嵌套类). class Outer { ...

  3. 实战docker,编写Dockerfile定制tomcat8镜像,实现web应用在线部署

    最初在tomcat上部署web应用的方式,是通过maven的maven-compiler-plugin插件先打成war包,再将war包复制到tomcat的webapps目录下,后来用上了tomcat7 ...

  4. python3 基础数据类型

    一.基础数据类型分类 python的数据类型主要包括以下几种: 1.数字 2.字符串 3.列表 4.字典 5.元组 6.集合 1.数字 int 数字主要是用于计算用的,使用方法并不多 #bit_len ...

  5. Erlang正则解析操作文件

    -module(tool). %% ==================================================================== %% API functi ...

  6. 在Centos上打Preempt-rt实时补丁

    1.系统centos6.5,内核2.6.31.6,补丁patch-2.6.31.6-rt19.bz2,以下方式获得: wget https://www.kernel.org/pub/linux/ker ...

  7. XMPP环境搭建 (mac环境下 安装自己独立的mysql与服务器(openfire),实现即时聊天功能)

    1简单概览 [一]XMPP简介 http://xmpp.org 即时通讯技术 IM - Instant Messaging ⽀支持⽤用户在线实时交谈.交谈双⽅方都需要⼀一个聊天窗⼝口,其中⼀一个⽤用户 ...

  8. beego——模型(model)

    beego ORM是一个强大的Go语言ORM框架.她的灵感主要来自Django ORM和SQLAlchemy. 已经支持的数据库驱动: MySQL:https://github.com/go-sql- ...

  9. Python 优雅的操作字典

    Python 中的字典是Python中一个键值映射的数据结构,下面介绍一下如何优雅的操作字典. 来源:https://www.linuxzen.com/python-you-ya-de-cao-zuo ...

  10. poj3903 Stock Exchange 二分+dp

    题目地址:http://poj.org/problem?id=3903 题目: Description The world financial crisis is quite a subject. S ...