订阅后调用方法Angular

Question

我想在 window 调整大小后调用一个方法，但有 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

好的，感谢您的快速回复（我正在使用 angular 7）。但是有没有别的办法呢:

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

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

订阅后调用方法Angular

Call a method after subscription Angular

angular

onresize