需求:

表單Submit後需要從後端做 新增or修改,
為避免User重複觸發,
打算將Submit設計為 Observable,
可以搭配Rxjs的exhaustMap等Operator使用。

html
加上 #submitButton

<button #submitButton> Test</button>

ts
對button建立一個 ViewChild

@ViewChild('submitButton') submitButton;

利用 Rxjs 的 fromEvent 將 button click 變成 Observable 物件
需要再 ngAfterViewInit 中使用

  ngAfterViewInit(): void {
    const click$ = fromEvent(this.submitButton.nativeElement, 'click');
    click$.subscribe(e => console.log(e));
  }

後續就可以對 click$ 搭配其他 Rxjs Operator 做應用。