angular2: Wie Observablen verwenden Fenster zum Entprellen: die Größe

Question

so dass ich einen Weg, um herauszufinden, ich versuche Fenster debouce: Ändern der Größe Ereignisse Observablen verwenden, so eine Art von Funktion würde nur aufgerufen werden, nachdem Benutzerfenster stoped Ändern der Größe oder einige Zeit hat ohne Größenänderung (zB 1sec) übergeben.

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

ist nur ein einfaches Beispiel, das Fenster verwendet: die Größe und zeigt, dass es sofort (Verwendung „Launch Vorschau in einem separaten Fenster“) reagiert.

Answer 1

Ich denke, dass Sie nicht auf diese Weise unter Verwendung von beobachtbaren Entprellen kann. In der Tat sind solche Dinge nicht aus der Box jetzt unterstützt, aber es ist eine offene Frage hierzu:

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

Ihr Ziel zu erreichen, können Sie direkt die Observable.fromEvent benutzen Sie eine beobachtbare für dieses Ereignis. Sie können also den Operator debounceTime auf dieses Observable anwenden.

Hier ist ein Beispiel:

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

dieses plunkr Siehe: https://plnkr.co/edit/uVrRXtnZj8warQ3qUTdN?p=preview

Answer 2

In einem unserer Apps hatten wir auch die Umsetzung Thierry Templier schlägt, aber ich merkte, dass Winkel der Änderungserkennung feuert (a viel) auf Fenstergröße ändern, was unsere App bei der Größenänderung langsam macht.

es Feste von Zonen & Gegenstand verwendet wird, etwa so:

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

See Plunker mit dem Thema here (Bildschirmkonsole Größe verändern und beobachten).

Und Plunker mit dem Update für dieses Problem here (die Größe Bildschirm und beobachten Konsole).

Answer 3

können Sie @HostListener Dekorateur verwenden. Dies ist eine übliche Art, Ereignisse wie diese zu abonnieren.

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

Sie können mehr über @HostListenerhere oder here lesen.