按钮输入不适用于来自事件的rxjs

Question

我正在尝试按钮点击事件订阅一个可观察的。

但是我似乎无法使用fromEvent。

我错过了什么？

我有一个按钮：

<button mat-raised-button #searchButton>Search</button>

在我的打字稿文件中，我有：

@ViewChild('searchButton') searchButton: ElementRef;

ngAfterViewInit() {

    fromEvent<MouseEvent>(this.searchButton.nativeElement, 'click')
      .pipe(
        debounceTime(150),
        distinctUntilChanged(),
      tap(() => {
        alert("SEARCH WAS CLICKED");
          this.paginator.pageIndex = 0;
          this.loadData();
        })
      )
      .subscribe();          
  }

编辑：

这适用于输入框。

@ViewChild('searchString') searchString: ElementRef;

fromEvent<MouseEvent>(this.searchString.nativeElement, 'click')

Answer 1

对于有同样问题的人。

我正在使用材料按钮并使其工作我必须执行以下操作：

@ViewChild('searchButton') searchButton: any;

fromEvent(this.searchButton._elementRef.nativeElement, "click")

Answer 2

摘要

• 如果要引用MatButton实例，则应执行以下操作：

  @ViewChild('matbut')
  matButton: MatButton;
  

• 如果仅需要 native元素来绑定事件，则应该执行以下操作：

  @ViewChild('some-buttom', {read: ElementRef})
  button: ElementRef;