RxJS：創建和訂閱 observable onClick

Question

我有這個模板：

<button (click)="action()">Action</button>

以及以下JS：

function action() {
  const obs$ = of(true).pipe(delay(500));

  obs$.pipe(take(1)).subscribe(...);
}

我想知道每次單擊按鈕時基本上創建一個新的 Observable 是否可以接受。 它有一個take(1)因此我認為 memory 泄漏在這里不是一個問題，但我想知道早點聲明我的 observable 並在其上附加/分離訂閱不是更好。

Answer 1

所以你給你的按鈕一個本地參考：

<button #myButton>Click me!</button>

然后在 TS 中：

@ViewChild() myButton: ElementRef;
clicks$: Observable<any>;
destroy$: Observable<boolean>;

ngAfterViewInit() {
  this.clicks$ = fromEvent(this.myButton.nativeElement, 'click').pipe(
    takeUntil(this.destroy$),
    //...
  ).subscribe();
}

ngOnDestroy() {
  this.destroy$.next(true);
}

僅在絕對必要時訂閱 TS。