无效的事件目标 - 将 fromEvent 与角度材质按钮一起使用时

Question

我正在尝试使用fromEvent和rxjs的defer模块动态地将单击事件设置为按钮。 使用普通的html按钮时，它工作正常，但不适用于角度材质按钮。

以下是与普通按钮配合使用正常的代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { defer, fromEvent } from 'rxjs';
import { map, tap } from 'rxjs/operators';
@Component({
selector: 'app-test',
template: `
<button #testBtn>Click me</button>
`
})
export class TestComponent implements OnInit {
@ViewChild('testBtn', { static: true }) testBtn: ElementRef<HTMLButtonElement>;
event$ = defer(() => fromEvent(this.testBtn.nativeElement, 'click')).pipe(
map(() => new Date().toString()),
tap(console.log)
)
constructor() { }
ngOnInit() {
this.event$.subscribe();
}
}

这是不适用于角度材料按钮

的代码

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { defer, fromEvent } from 'rxjs';
import { map, tap } from 'rxjs/operators';
@Component({
selector: 'app-test',
template: `
<button mat-raised-button #testBtn>Click me</button>
`
})
export class TestComponent implements OnInit {
@ViewChild('testBtn', { static: true }) testBtn: ElementRef<HTMLButtonElement>;
event$ = defer(() => fromEvent(this.testBtn.nativeElement, 'click')).pipe(
map(() => new Date().toString()),
tap(console.log)
)
constructor() { }
ngOnInit() {
this.event$.subscribe();
}
}

我猜不出为什么会出现这个问题。

你能帮我理解吗？

Answer 1

编辑：将其添加到您的 ViewChild{ read: ElementRef };

将其用于您的垫子按钮。 @ViewChild("myButton"， { read： ElementRef }( myButtonRef： ElementRef; 您需要将按钮用作本机元素元素引用;