angular2：observablesを使用してウィンドウをデバウンスする方法：resize

Question

私は、ウィンドウをデバウンスする方法を見つけようとしています：observablesを使用してイベントのサイズを変更しています。サイズの変更なしに渡されます（たとえば1秒）。

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が提案実装を持っていたが、私は角度の変化検出は、（Aを発射していることに気づきましたロット）のサイズを変更すると、アプリケーションのサイズを変更するのが遅くなります。そのように、ゾーン&件名を使用して、それを修正

：

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); }); 
} 

は問題here（画面のサイズを変更し、コンソールを監視）と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); 
    } 
} 

あなたは@HostListenerhereまたはhereについての詳細を読むことができます。