Кнопка Angular Material Button и функция RxJS fromEvent - нет свойства nativeElement, а есть только свойство _nativeElement

Question

У меня есть компонент Angular, и в его шаблоне я поместил кнопку Angular Material, то есть что-то вроде <button #myButton mat-button></button>.

Теперь я хочу получить эту кнопку в своем коде,сгенерировать Observable, который будет генерироваться при нажатии кнопки, и с радостью делать все, что мне нужно, с таким Observable.

Во-первых: я получаю кнопку, используя @ViewChild со следующим кодом

@ViewChild('myButton') myButton: MatButton;

Я указываю тип переменной как MatButton, поскольку она на самом деле относится к этому типу,

И в итоге моя проблема.Я хотел бы использовать мой обычный подход, то есть использовать fromEvent(this.myButton.elementRef.nativeElement, 'click') в методе ngAfterViewInit.К сожалению, я получаю ошибку Invalid event target.Немного покопавшись, я обнаружил, что MatButton не имеет свойства elementRef, но имеет свойство с именем _elementRef.В начале подчеркивания это звучит как частная собственность, но я не нашел лучшего способа создать Observable, начиная с директивы MatButton и используя fromEvent функцию RxJS.

Любое предложение будет оценено..

Answer 1

Вы можете получить доступ к ElementRef кнопки с опцией read, равной ViewChild:

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

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

См. этот стек для демонстрации и эту статью для получения дополнительной информации о ViewChild.