angular2监听页面大小变化
一、现象
全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化
二、解决
1、引入 :
import { Observable } from 'rxjs';
2、使用(在ngOnInit方法中):
ngOnInit() {
// 页面监听
Observable.fromEvent(window, 'resize')
.debounceTime(100) // 以免频繁处理
.subscribe((event) => {
// 这里处理页面变化时的操作
console.log('come on ..');
});
} 三、总结 研究有没有更多的方法可以在切换时,注销这些监听?以免出现内存泄漏。尽可能在
ngOnDestroy() 方法中
angular2监听页面大小变化的更多相关文章
- vue监听页面大小变化重新刷新布局
在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- webview缓存及跳转时截取url地址、监听页面变化
缓存及一些设定 我在做一些项目时,h5做的项目手机浏览器能使用,但是在搬到webview时候不能用,这个时候通过查阅资料,原来是webview没有设定好,包括缓存.缓存大小及路径等等 mWebview ...
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...
- JavaScript监听页面可见性(焦点)同时改变title的三种方法
JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...
- HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...
- 【转载】实时监听输入框值变化的完美方案:oninput & onpropertychange
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...
- 实时监听输入框值变化:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
随机推荐
- VB VB 定义及区别
VB是Visual Basic的简称,是由美国微软公司于1991年开发的一种可视化的.面向对象和采用事件驱动方式的结构化高级程序设计语言,可用于开发 Windows 环境下的各类应用程序.VC是Vis ...
- Oracle 归档日志文件
今天数据群有人反应网站不能正常打开,经检查Oracle数据库远程连不上,提示信息:ORA-00257: archiver error. Connect internal only, until f ...
- ubuntu下的git版本创建
一.git的特点 二.gei的安装和配置 1.安装命令如下 sudo apt-get install git 2.安装成功后输入 git 3.创建版本库 git init 4.使用 先创建一个txt文 ...
- 用Python制作中国地图、地球平面图及球形图
绘制地图在python中主要用到的 basemap 库,这个库是 matplotlib 库中一个用于在 Python 中绘制地图上的 2D 数据的工具包. 首先安装库: 1.安装 geos 库:Pyt ...
- asp.net 实现后台异步处理的方式
问题描述: 刚刚开发的一个页面,使用的NET的MVC4.5框架,因为页面数据加载慢需要优化,页面上有8个请求,但是请求并没有什么相互依赖的关系.前端使用ajax异步,但是后台并没有按照异步程序处理.解 ...
- 【学习】数据规整化:清理、转换、合并、重塑(续)【pandas】
@合并重叠数据 还有一种数据组合问题不能用简单的合并或连接运算来处理.比如说,你可能有索引全部或部分重叠的两个数据集 使用numpy的where函数,它用于表达一种矢量化的if - else a = ...
- V先生:信息流广告标题党必备的500个热词
稍微没有全都偏,简直仅仅只永远, 已经曾经就竟然,将要立刻刚偶然, 渐渐终于决忽然,难道连续又再三, 也许必须很非常,最太十分更马上, 越极总挺常常再,屡次一定也不还. 你一定不知道.如何.最.咋.是 ...
- @Data的注解使用以及在IDEA上安装
平时在开发过程中创建实体类的时候就经常的操作是:先写成员变量,然后再提供getXxx().setXxx()方法,然后看需要再提供toString等方法.这样一来不仅会发现每写一个实体类的话就会有很多相 ...
- rest_famework 增删改查初第三阶段(高级,此阶段是优化第二阶段的代码)的使用
url: re_path('authors/$', views.AuthorView.as_view()), re_path('book/(?P<pk>\d+)/$', views.Boo ...
- AHA高级心血管生命支持ACLS课前自我评估测试
AHA高级心血管生命支持ACLS课前自我评估测试 答题人:a 成绩单 您的得分:17.5 分 答对题数:7 题 您的名次:47 名 问卷满分:100 分 测试题数:40 题 参与人次:47 人 ...