angular2: Как использовать наблюдаемые для окна debounce: resize

Question

, поэтому я пытаюсь выяснить способ дебюта окна: изменять размеры событий с помощью наблюдаемых, поэтому некоторая функция будет вызываться только после того, как пользователь остановил окно изменения размера или некоторое время прошло без изменения размера (скажем, 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 предлагает, но я заметил, что обнаружение изменения углового является стрельбой (а много) при изменении размера окна, что делает наше приложение медленным при изменении размера.

Fixed его используют зоны & Subject, например:

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 (размер экрана и смотреть консоли).

И плункер с исправлением по этой проблеме 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.