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 ...
随机推荐
- 如何确保Memcache数据读写操作的原子性(转)
什么是CAS协议 Memcached于1.2.4版本新增CAS(Check and Set)协议类同于Java并发的CAS(Compare and Swap)原子操作,处理同一item被多个线程更改过 ...
- Ajax 请求请求 MVC WebAPI跨域问题;XMLHttpRequest cannot load
问题:XMLHttpRequest cannot load http://192.168.1.4:9010//api/contacts. The 'Access-Control-Allow-Origi ...
- 关于python的多行注释,启动新浏览器,循环语句乘法口诀
1,提问:如何将python写的多行代码改写成注释,进行写下一段代码?这样可以在多个脚本中写东西? 回答:百度了一下,还真有 选中所要注释的代码 CTRL + / 然后所选的代码前面都会出现#,编程 ...
- Slf4j与log4j及log4j2的关系及使用方法
Slf4j与log4j及log4j2的关系及使用方法 slf4j slf4j仅仅是一个为Java程序提供日志输出的统一接口,并不是一个具体的日志实现方案,就比如JDBC一样,只是一种规则而已,所以单独 ...
- 13Linux_vsftpd_Samba_NFS实现文件共享_TFTP
vsftpd服务程序: 匿名开放模式 本地用户模式 虚拟用户模式 简单文件传输协议 TFTP:UDP协议,端口69 TFTP服务使用xinetd服务程序来管理. Samba文件共享服务 NFS网络文件 ...
- springboot性能优化
一.扫描优化 原文链接:http://www.studyshare.cn/blog-front/blog/details/1135 SpringBoot项目中的启动类,会使用@SpringBootAp ...
- Entity Framework 支持 DataTable
转载:http://www.cnblogs.com/wlflovenet/archive/2011/12/30/EF11.html https://www.cnblogs.com/hanjun0612 ...
- Tomcat下载以及安装、eclipse工具配置tomcat9的具体步骤
(小白经验,大咖勿喷) 开始学javaweb的一些技术了,最让人头疼的就是环境的配置以及必要软件的安装,比如数据库mysql.服务器Tomcat.eclipse工具等等. 自己也度娘了很多大咖的经验, ...
- MATLA总结三
1.将分数表示转换为小数表示: vpa( ******(表达式或者变量), n(小数点后几位)) 2.将一个式子中的变量带入具体的值: subs( y, x, [2,3,4] ) 3.用工具箱确定阶 ...
- jq 获取下一个兄弟原素 下拉箭头旋转
$('.weui-cells__title').on("click", function(e,rr){ isshow=$(this).attr('isshow') if(issho ...