Angular 2 : How to use observables to debounce window:resize

Question

所以我想找出一种方法来消除 window:resize 使用 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;
  }
}

只是一个使用 window:resize 的简单示例，并显示它会立即使用react(使用“在单独的窗口中启动预览”)。

Answer 1

我认为您不能使用 observable 以这种方式去抖动。事实上，现在不支持开箱即用的东西，但是有一个悬而未决的问题:

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

查看此插件:https://plnkr.co/edit/uVrRXtnZj8warQ3qUTdN?p=preview