一、现象

全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化

二、解决

1、引入 :

import { Observable } from 'rxjs';

2、使用(在ngOnInit方法中):

 

ngOnInit() {
  // 页面监听
  Observable.fromEvent(window, 'resize')
  .debounceTime(100) // 以免频繁处理
  .subscribe((event) => {
    // 这里处理页面变化时的操作
  console.log('come on ..');
  });
} 三、总结 研究有没有更多的方法可以在切换时,注销这些监听?以免出现内存泄漏。尽可能在
ngOnDestroy() 方法中
												

angular2监听页面大小变化的更多相关文章

  1. vue监听页面大小变化重新刷新布局

    在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...

  2. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  3. webview缓存及跳转时截取url地址、监听页面变化

    缓存及一些设定 我在做一些项目时,h5做的项目手机浏览器能使用,但是在搬到webview时候不能用,这个时候通过查阅资料,原来是webview没有设定好,包括缓存.缓存大小及路径等等 mWebview ...

  4. 详解vuex结合localstorage动态监听storage的变化

    这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...

  5. JavaScript监听页面可见性(焦点)同时改变title的三种方法

    JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...

  6. HTML5 oninput实时监听输入框值变化的完美方案

    在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...

  7. 【转载】实时监听输入框值变化的完美方案:oninput & onpropertychange

    oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...

  8. 实时监听输入框值变化:oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...

  9. js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange

    (1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...

随机推荐

  1. 跨年呈献:HP-Socket for Linux 1.0 震撼发布

    三年,三年,又三年,终于,终于,终于不用再等啦!就在今天,HP-Socket for Linux v1.0 震撼发布!还是一样的接口,一样的高效,一样的简便,一样的味道.     HP-Socket ...

  2. thunderbird 163 smtp

    thunderbird 163 smtp 如果要正常发送,配置如下: server: smtp.163.com port: 465 auth: Normal password security: SS ...

  3. 【机器学习_9】sklearn

    背景 机器学习的重头戏就在sklearn,里面包含各种机器学习算法.希望尽量通过便易上手的方式掌握这个库. 资料 官网--随时查 https://scikit-learn.org/stable/ sk ...

  4. uva-757-贪心

    题意:有个人要去湖里钓鱼,总共有N个湖,排成一个序列,用字母P表示湖,从湖pi 到 pi+1(下一个湖)需要ti个五分钟. 并且,每个湖里可钓出来的鱼每过五分钟就减少di.如果产出的鱼小于等于di.那 ...

  5. ios端滚动优化

    加入css -webkit-overflow-scrolling: touch;

  6. ichartjs用法

    代码 <script type="text/javascript" src="../js/ichart.1.2.min.js"></scrip ...

  7. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165304

    下载镜像文件 在官网上下载好64位的镜像文件后,按照网上是教程进行安装,安装成功后截图如下 接下来是安装增强功能 按照教程安装增强功能后截图如下 设置共享文件 安装搜狗 在安装搜狗时遇到了安装失败的情 ...

  8. yml使用

    yml: value: 可以用单引号或者双引号引起来,这样就不会出现内容中特殊字符含义. yml中   key:value ,如果value是数字需要和前面的冒号隔一个空格,否则获取不到value

  9. P1100 高低位交换

    题目描述 给出一个小于2^{32}232的正整数.这个数可以用一个3232位的二进制数表示(不足3232位用00补足).我们称这个二进制数的前1616位为“高位”,后1616位为“低位”.将它的高低位 ...

  10. JavaFX(Maven 方式)

    运行界面第一种方式 运行界面第二种方式 参考文献 https://github.com/AlmasB/JavaFX11-example