Question

我想在调整窗口大小之后调用一个方法，但是要延迟500毫秒。我是这样做的，并且可以正常工作，但是您会以同样的方式来做吗？我是Angular的新人

resizeEvent$: Subject<MouseEvent> = new Subject<MouseEvent>();

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.resizeEvent$.next(event);
  }

  ngOnInit() {

    this.resizeEvent$.debounceTime(300).subscribe( data => this.initJourney());}

Answer 1

您没有提到Angular和RxJS的版本，但我认为您使用的是RxJS v6 +。

因此，您需要使用pipe方法才能使用debounceTime 首次导入debounceTime：

import {debounceTime} from 'rxjs/operators';

然后：

ngOnInit() {

    this.resizeEvent$
     .pipe(
       debounceTime(300)
     )
    .subscribe( data => this.initJourney());
}

更新

我认为您需要将Subject<MouseEvent>更改为Subject<Event>。

更新2

还有另一种不涉及debounceTime的方式。您可以按如下方式在事件监听器方法中使用setTimeout。确保删除ngOnInit中的主题和订阅。

@HostListener('window:resize', ['$event'])
onResize(event) {
    setTimeout(() => {
      this.initJourney();
    },300);
}

Answer 2

好的，谢谢您的快速回复（即使用角度7）。但是还有另一种方法：

.subscribe( data => this.initJourney());

看起来很奇怪，数据未使用

订阅Angular后调用方法

2 个答案: