Angular Material Button 和 RxJS fromEvent 函数 - 没有 nativeElement 属性，只有 _nativeElement 属性

Question

我有一个 Angular 组件，在它的模板中我放置了一个 Angular Material 按钮，即类似<button #myButton mat-button></button>.

现在我想要做的是在我的代码中获取这个按钮，生成一个 Observable，当单击按钮时发出该 Observable 并愉快地对这样的 Observable 做我需要做的任何事情。

第一件事：我使用@ViewChild以下代码抓住按钮

@ViewChild('myButton') myButton: MatButton;

我指定变量的类型，MatButton因为它实际上是那种类型。

最终我的问题。我想使用我通常的方法，即fromEvent(this.myButton.elementRef.nativeElement, 'click')在ngAfterViewInit方法中使用。不幸的是我收到一个错误Invalid event target。挖掘了一下我发现它MatButton没有属性，elementRef但它有一个名为_elementRef. 从前导下划线这听起来像是一个私有属性，但我没有找到任何更好的方法来创建一个 Observable，从一个MatButton指令开始并使用fromEventRxJS 的函数。

任何建议将不胜感激。

Answer 1

您可以使用以下选项访问ElementRef该按钮：readViewChild

@ViewChild("myButton", { read: ElementRef }) myButtonRef: ElementRef;

ngOnInit() {
  console.log(this.myButtonRef.nativeElement);
  ...
}

请参阅此 stackblitz的演示和本文以了解更多信息ViewChild.