angular4 使用window事件
Angular使用window对象中的事件最好不要像使用jQuery那样使用 如下:

注:写事件直接绑定到window对象上了,组件销毁时这个事件没有解绑
可以使用剪头函数不用声明that

注:这样写在组件销毁后依然会存在window对象中。 即使手动在组件的ngOnDestory()方法中去解绑这个事件,依然会有错误。待研究
解决办法:使用angular自带的宿主来实现 具体如下。
1. 使用host

2. 使用HostListener

推荐使用第二种方式。
*转载请附出处
参考: https://stackoverflow.com/questions/35527456/angular-window-resize-event/35527852#35527852
https://zhuanlan.zhihu.com/p/26309903
angular4 使用window事件的更多相关文章
- JavaScript 获取按键,并屏蔽系统 Window 事件
// JavaScript 获取按键,并屏蔽系统 Window 事件 window.document.onkeydown = onkeydown; function onkeydown(event) ...
- angular 使用window事件
1. 使用host 2. 使用HostListener 推荐使用第二种方式. 不推荐下面的方法,虽然也能进行window事件的绑定,但组件销毁后,window事件任然保留,即使手动在组件的ngOn ...
- window事件
window事件是较为重要的事件,接下来就讲解一下. 1.获取页面滚动栏的距离 什么是滚动栏,就是网页内容过多时,通过滚轮控制上下显示或者左右显示: 为窗口添加滚动条事件: window.onscro ...
- Angular4的dom事件
Angular4的dom事件 差值表达式和属性绑定其实是一样的(例) <!-- 这两个是一样的效果,使用哪个都可以 --> <img src="{{imgUrl}}&quo ...
- (非妙味3):浏览器window事件:及浏览各种尺寸介绍
(触发)window.onload; window.onscroll; window.onresize; (兼容)网页可视区尺寸.网页全文尺寸.滚动距离 (实例)广告块高度动态居中.回到顶部 ...
- 加载window事件
$(document).ready()和window.onload的区别 发表于 2012-08-29 由 admin 以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM ...
- WPF中常用的Window事件
官方链接:https://msdn.microsoft.com/en-us/library/system.windows.window.statechanged(v=vs.110).aspx 1. A ...
- jquery自定义window事件
<body> <a href='https://www.baidu.com/'>百度</a> </body> <script type=" ...
- window对象,BOM,window事件,延时器,DOM
01.定时器补充 function fn(){ console.log(1);}setInterval("fn()",100); //定时器调用匿名函数/* funct ...
随机推荐
- UndertowServer+SpringMVC+Thymeleaf模板引擎构建轻量级的web项目
这两周需要写一个页面来请求另一个服务中的接口,服务器采用了超轻量级的undertow,模板引擎采用的是Thymeleaf,在寻找页面资源位置这个地方难住了我.下面分享一下,这方面的代码. Spring ...
- Oracle Number类型超长小数位为0问题
碰到了一个非常奇怪的问题,从Excel拷贝出来的数据,位数很长,通过Pl Sql 导出到Oracle后为0了,而且设置查询条件为0时,无法查询出来,条件大于0居然能查询出来,通过to_number也是 ...
- 20155117王震宇 2006-2007-2 《Java程序设计》第一周学习总结
20155117王震宇 2006-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 尽量简单的总结一下本周学习内容 尽量不要抄书,浪费时间 看懂就过,看不懂,学习有心得的 ...
- 你不知道的Static
Static静态字段,静态方法,静态代码块 壹 简介 一些场景下会要求一个类的多个实例共享一个成员变量:有时候想定义一些不和具体对象关联.不需要new就调用的方法 举例:Console类的Write ...
- 用Vue来实现图片上传多种方式
没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...
- 2017ACM暑期多校联合训练 - Team 3 1005 RXD and dividing
题目链接 Problem Description RXD has a tree T, with the size of n. Each edge has a cost. Define f(S) as ...
- struts入门
1.概念
- 16 - 文件操作-StringIO-BytesIO
目录 1 文件操作 1.1 open函数介绍 1.2 打开操作 1.2.1 mode模式 1.2.2 文件指针 1.2.3 缓冲区 1.2.4 encoding编码 1.2.5 其他参数 1.3 读写 ...
- pytesser模块WindowsError错误解决方法
在使用pytesser做图片文字识别时遇到 WindowsError: [Error 2] 错误,报错内容如下: Traceback (most recent call last): File &qu ...
- C# 开发(创蓝253)手机短信验证码接口
创蓝253: https://www.253.com/ #region 获取手机验证码(创蓝253) /// <summary> /// 获取手机验证码(创蓝253) /// </s ...