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