Angular2監(jiān)聽頁面大小變化的解決方法
更新時(shí)間：2017年10月09日 16:52:11 作者：小老虎網(wǎng)絡(luò)
這篇文章主要介紹了Angular2監(jiān)聽頁面大小變化的解決方法,需要的朋友可以參考下
一、現(xiàn)象
全屏頁面中的圖表，在很多的時(shí)候需要 resize 一把，以適應(yīng)頁面的大小變化
二、解決
1、引入 ：
import { Observable } from 'rxjs';
2、使用(在ngOnInit方法中)：
ngOnInit() {
// 頁面監(jiān)聽
Observable.fromEvent(window, 'resize')
.debounceTime(100) // 以免頻繁處理
.subscribe((event) => {
// 這里處理頁面變化時(shí)的操作
console.log('come on ..');
});
}
三、總結(jié)
研究有沒有更多的方法可以在切換時(shí)，注銷這些監(jiān)聽？以免出現(xiàn)內(nèi)存泄漏。盡可能在ngOnDestroy() 方法中。
以上所述是小編給大家介紹的Angular2監(jiān)聽頁面大小變化的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Angular本身監(jiān)督所有Angular組件和指令的生命周期 。為了在開發(fā)應(yīng)用程序時(shí)順利進(jìn)行，您必須了解結(jié)果的生命周期。組件是任何Angular應(yīng)用程序的主要構(gòu)建塊。因此，必須了解它們才能理解組件生命周期的處理步驟。只有這樣才能在應(yīng)用程序的開發(fā)中實(shí)現(xiàn)。2021-05-05
使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié)
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
解決Angular.Js與Django標(biāo)簽沖突的方案
AngularJS和django的模板都是用{{}}來引用變量的，這就導(dǎo)致了沖突，所以這篇文章主要就給大家介紹了如何解決Angular.Js與Django標(biāo)簽沖突的方案，有需要的朋友們可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
Angular中$cacheFactory的作用和用法實(shí)例詳解
$cacheFactory是一個(gè)為Angular服務(wù)生產(chǎn)緩存對(duì)象的服務(wù)。接下來通過本文給大家介紹Angular中$cacheFactory的作用和用法實(shí)例詳解，非常不錯(cuò)，感興趣的朋友一起看下吧2016-08-08
Angular中封裝fancyBox(圖片預(yù)覽)遇到問題小結(jié)
這篇文章主要介紹了Angular中封裝fancyBox(圖片預(yù)覽)遇到的問題小結(jié),需要的朋友可以參考下2017-09-09
這篇文章主要介紹了在angular 6中使用 less 的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
Angularjs之ngModel中的值驗(yàn)證綁定方法
今天小編就為大家分享一篇Angularjs之ngModel中的值驗(yàn)證綁定方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
AngularJS基礎(chǔ) ng-mousemove 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-mousemove 指令,這里幫大家整理了ng-mousemove 指令的詳細(xì)資料,并附有示例代碼,有需要的朋友參考下2016-08-08
這篇文章主要介紹了Angular 容器部署的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧2017-07-07