angular - 订阅Angular后调用方法

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 First import 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

好的，谢谢您的快速回复（我使用 Angular 7）。但是没有另一种方式：

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

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