一、现象

全屏页面中的图表,在很多的时候需要 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. redis(1)--redis3.2.8安装

    一.下载安装包 http://download.redis.io/releases/  选择对应的版本 二.copy到对应的虚拟机上 运行 tar -zxvf  redis-3.2.8 进行解压 更改 ...

  2. python3 正则匹配[^abc]和(?!abc)的区别(把多个字符作为一个整体匹配排除)

    目的:把数字后面不为abc的字符串找出来 如1ab符合要求,2abc不符合要求 str = '1ab' out = re.match(r'\d+(?!abc)',str) str1 = '1abc' ...

  3. 2018-2019-2 网络对抗技术 20165304 Exp5 MSF基础应用

    2018-2019-2 网络对抗技术 20165304Exp5 MSF基础应用 原理与实践说明 1.实践原理 1).MSF攻击方法 主动攻击:扫描主机漏洞,进行攻击 攻击浏览器 攻击其他客户端 2). ...

  4. Spring 整合WebSocket, Error during WebSocket handshake: Unexpected response code: 302 还有200的错误

    springboot 集成websocket 及其简单,,,但是管理端使用的是Spring,原生配置,发生这个错误,,,302 被重定向了...我起的是本地locallhost,把ip换成 local ...

  5. 【题解】洛谷 P1014 【Cantor表】

    1. 我们先引入三角形数的概念: >定数目的点或圆在等距离的排列下可以形成一个等边三角形,这样的数被称为三角形数. >古希腊著名科学家毕达哥拉斯把数1,3,6,10,15,21……这些数量 ...

  6. java split方法

    String a = "O|O||"; System.out.println(a.split("\\|").length); //["O", ...

  7. 20175213 2018-2019-2 《Java程序设计》第9周学习总结

    教材学习内容总结 根据课本的介绍下载了MySQL和Navicat for MySQL并成功对后者进行破解: 操作方法可分为三步: 一.配置程序--让我们程序能找到数据库的驱动jar包 1.把.jar文 ...

  8. 在anaconda下安装已经下载好Opencv4的痛苦回忆

    来来回回装了很多回,今天终于一鼓作气把它安装好,记录一下过程. 准备: Opencv4的安装包,可以在官网上下载 anaconda——主要目的是在anaconda下的某个environment中安装最 ...

  9. 基于DPDK的高效包处理系统

    一.概念 Intel® DPDK全称Intel Data Plane Development Kit,是intel提供的数据平面开发工具集,为Intel architecture(IA)处理器架构下用 ...

  10. python中的函数和变量

    本节内容 函数的定义方法 函数功能 函数的返回值 函数的形参与实参 全局变量与局部变量 递归 函数的作用域 匿名函数lambda 函数式编程 常用内置函数 其他内置函数 函数 函数的定义方法 函数就相 ...