कोणीय 2: विंडो को डिबॉउशन करने के लिए अवलोकनों का उपयोग कैसे करें:

Question

का आकार बदलें, इसलिए मैं विंडो को डिबॉस करने का एक तरीका जानने का प्रयास कर रहा हूं: अवलोकनों का उपयोग करके ईवेंट का आकार बदलें, इसलिए किसी प्रकार का फ़ंक्शन केवल उपयोगकर्ता को रुकने वाली विंडो के बाद या कुछ समय के लिए बुलाया जाएगा आकार परिवर्तन के बिना पारित (1sec कहें)।

https://plnkr.co/edit/cGA97v08rpc7lAgitCOd

import {Component} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div (window:resize)="doSmth($event)"> 
     <h2>Resize window to get number: {{size}}</h2> 

    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    size: number; 
    constructor() { 
    } 

    doSmth(e: Event) { 
    this.size = e.target.innerWidth; 
    } 
} 

सिर्फ एक सरल नमूना खिड़की का उपयोग करता है: आकार बदलने और पता चलता है कि यह तुरंत प्रतिक्रिया करता है (प्रयोग "अलग विंडो में पूर्वावलोकन लॉन्च")।

Answer 1

मुझे लगता है कि आप अवलोकन के जरिए इस तरह से बहस नहीं कर सकते हैं। वास्तव में, इस तरह की चीजों बॉक्स से बाहर अभी समर्थित नहीं हैं लेकिन इस के लिए एक खुला मुद्दा है:

• https://github.com/angular/angular/issues/4062

अपने लक्ष्य है, तो आप सीधे Observable.fromEvent का उपयोग पाने के लिए कर सकता है प्राप्त करने के लिए इस घटना के लिए एक अवलोकन योग्य। तो आप इस अवलोकन पर debounceTime ऑपरेटर को लागू कर सकते हैं।

@Component({ 
    (...) 
}) 
export class App { 
    size: number; 
    constructor() { 
    Observable.fromEvent(window, 'resize') 
     .debounceTime(1500) 
     .subscribe((event) => { 
      this.doSmth(event); 
     }); 
    } 

    doSmth(e: Event) { 
    console.log('do smth'); 
    this.size = e.target.innerWidth; 
    } 
} 

इस plunkr देखें::

यहां एक नमूना है https://plnkr.co/edit/uVrRXtnZj8warQ3qUTdN?p=preview

Answer 2

हमारे क्षुधा में से एक में हम भी कार्यान्वयन थियरी TEMPLIER का प्रस्ताव किया था, लेकिन मैंने देखा है कि कोणीय के परिवर्तन का पता लगाने फायरिंग कर रहा है (एक बहुत) खिड़की का आकार बदलने पर, जो हमारे ऐप को आकार बदलने में धीमा कर देता है।

क्षेत्रों & विषय का उपयोग कर, तो तरह से यह निश्चित: मुद्दा here साथ

private changeSubject = new Subject<number>(); 

constructor(private zone: NgZone) { 
    this.zone.runOutsideAngular(() => { 
    Observable.fromEvent(window, 'resize') 
    .debounceTime(1500).distinctUntilChanged().subscribe((e: Event) => { 
     this.zone.run(() => { 
     this.changeSubject.next(e); 
     }) 
    } 
    ) 
    }); 
    this.changeSubject.subscribe((e: Event) => { this.doSmth(e); }); 
} 

plunker सी (स्क्रीन का आकार बदलने और सांत्वना देखें)।

और इस समस्या के लिए फिक्सर के साथ प्लंकर here (स्क्रीन का आकार बदलें और कंसोल देखें)।

Answer 3

आप @HostListener सजावट का उपयोग कर सकते हैं। इस तरह की घटनाओं की सदस्यता लेने का यह एक आम तरीका है।

@Component({ 
    // ... 
}) 
export class App { 
    private changeSize = new Subject(); 

    constructor() { 
    this.changeSize 
    .asObservable() 
    .throttleTime(1000) 
    .subscribe(innerWidth => console.log('innerWidth:', innerWidth)); 
    } 

    @HostListener('window:resize', ['$event.target']) 
    public onResize(target) { 
    this.changeSize.next(target.innerWidth); 
    } 
} 

आप @HostListener अधिक के बारे में here या here पढ़ सकते हैं।