一、现象

全屏页面中的图表,在很多的时候需要 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. VB VB 定义及区别

    VB是Visual Basic的简称,是由美国微软公司于1991年开发的一种可视化的.面向对象和采用事件驱动方式的结构化高级程序设计语言,可用于开发 Windows 环境下的各类应用程序.VC是Vis ...

  2. Oracle 归档日志文件

      今天数据群有人反应网站不能正常打开,经检查Oracle数据库远程连不上,提示信息:ORA-00257: archiver error. Connect internal only, until f ...

  3. ubuntu下的git版本创建

    一.git的特点 二.gei的安装和配置 1.安装命令如下 sudo apt-get install git 2.安装成功后输入 git 3.创建版本库 git init 4.使用 先创建一个txt文 ...

  4. 用Python制作中国地图、地球平面图及球形图

    绘制地图在python中主要用到的 basemap 库,这个库是 matplotlib 库中一个用于在 Python 中绘制地图上的 2D 数据的工具包. 首先安装库: 1.安装 geos 库:Pyt ...

  5. asp.net 实现后台异步处理的方式

    问题描述: 刚刚开发的一个页面,使用的NET的MVC4.5框架,因为页面数据加载慢需要优化,页面上有8个请求,但是请求并没有什么相互依赖的关系.前端使用ajax异步,但是后台并没有按照异步程序处理.解 ...

  6. 【学习】数据规整化:清理、转换、合并、重塑(续)【pandas】

    @合并重叠数据 还有一种数据组合问题不能用简单的合并或连接运算来处理.比如说,你可能有索引全部或部分重叠的两个数据集 使用numpy的where函数,它用于表达一种矢量化的if - else a = ...

  7. V先生:信息流广告标题党必备的500个热词

    稍微没有全都偏,简直仅仅只永远, 已经曾经就竟然,将要立刻刚偶然, 渐渐终于决忽然,难道连续又再三, 也许必须很非常,最太十分更马上, 越极总挺常常再,屡次一定也不还. 你一定不知道.如何.最.咋.是 ...

  8. @Data的注解使用以及在IDEA上安装

    平时在开发过程中创建实体类的时候就经常的操作是:先写成员变量,然后再提供getXxx().setXxx()方法,然后看需要再提供toString等方法.这样一来不仅会发现每写一个实体类的话就会有很多相 ...

  9. rest_famework 增删改查初第三阶段(高级,此阶段是优化第二阶段的代码)的使用

    url: re_path('authors/$', views.AuthorView.as_view()), re_path('book/(?P<pk>\d+)/$', views.Boo ...

  10. AHA高级心血管生命支持ACLS课前自我评估测试

    AHA高级心血管生命支持ACLS课前自我评估测试 答题人:a   成绩单 您的得分:17.5 分 答对题数:7 题 您的名次:47 名 问卷满分:100 分 测试题数:40 题 参与人次:47 人   ...