angular2: come utilizzare le osservabili per rimbalzare la finestra: ridimensionare

Question

quindi sto cercando di capire un modo per rimuovere la finestra: ridimensiona gli eventi usando osservabili, quindi un certo tipo di funzione verrebbe chiamata solo dopo che l'utente ha interrotto la finestra di ridimensionamento o un po 'di tempo passato senza cambiamento di dimensione (diciamo 1 sec).

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

è solo un semplice esempio che utilizza la finestra: ridimensionare e dimostra che reagisce istantaneamente (uso "Launch anteprima in una finestra separata").

Answer 1

Penso che non è possibile rimbalzare in questo modo utilizzando osservabile. In realtà, queste cose non sono supportati fuori dalla scatola in questo momento, ma c'è un problema aperto per questo:

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

per raggiungere il tuo obiettivo, è possibile utilizzare direttamente il Observable.fromEvent per ottenere un osservabile per questo evento. Quindi puoi applicare l'operatore debounceTime su questo osservabile.

Ecco un esempio:

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

Vai a questa plunkr: https://plnkr.co/edit/uVrRXtnZj8warQ3qUTdN?p=preview

Answer 2

In una delle nostre applicazioni abbiamo avuto anche l'attuazione Thierry Templier propone, ma ho notato che il rilevamento delle modifiche di angolare è sparare (un lotto) sul ridimensionamento della finestra, il che rende la nostra app rallentata al ridimensionamento.

è stato risolto utilizzando le zone & Soggetto, in questo modo:

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 con l'emissione here (ridimensionamento dello schermo e guardare console).

E plunker con la correzione per questo problema here (schermo di ridimensionamento e console di controllo).

Answer 3

È possibile utilizzare il decoratore @HostListener. Questo è un modo comune per sottoscrivere eventi come questo.

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

Si può leggere di più su @HostListenerhere o here.