代码之家 › 专栏 › 技术社区 › Picci

Angular Material Button和RXJS FromEvent函数-没有NativeElement属性,只有_NativeElement属性

angular-material rxjs angular

2

Picci · 技术社区 · 7 年前

我有一个角组件,在它的模板中我放置了一个角材质按钮,例如 <button #myButton mat-button></button> .

现在我要做的是在我的代码中抓住这个按钮,生成一个当点击按钮时发出的可观察的,并且愉快地做我需要做的任何事情来处理这个可观察的。

第一件事:我用 @ViewChild 使用以下代码

@ViewChild('myButton') myButton: MatButton;

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

最终我的问题。我想用我通常的方法,即 fromEvent(this.myButton.elementRef.nativeElement, 'click') 在 ngAfterViewInit 方法。不幸的是我出错了 Invalid event target . 挖了一点,我发现了 Mat按钮 没有属性 elementRef 但它有一个名为 _elementRef . 从开头的下划线来看,这听起来像是私有财产,但我没有找到任何更好的方法来创建一个可观察的从 Mat按钮 指令和使用 fromEvent RXJS的功能。

任何建议都将不胜感激。

1 回复 | 直到 7 年前

1

ConnorsFan 7 年前

您可以访问 ElementRef 按钮的 read 选择权 ViewChild :

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

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

见 this stackblitz 为演示和 this article 有关更多信息 观察儿童 .