Недопустимая цель события - при использовании fromEvent с Angular Material Button - PullRequest
Новая
       11

Недопустимая цель события - при использовании fromEvent с Angular Material Button

0 голосов
/ 08 января 2020

Я пытаюсь динамически настроить событие нажатия кнопки, используя fromEvent и defer модули rxjs. Он работает нормально при использовании обычной кнопки html, но не работает с кнопкой Angular Material.

Вот код, который отлично работает с кнопкой Normal: 

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();
  }
}

А здесь это код, который не работает с Angular Material Button 

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();
  }
}

Я не мог догадаться, почему эта проблема происходит.

Можете ли вы помочь мне понять это?

1 Ответ

0 голосов
/ 08 января 2020

РЕДАКТИРОВАТЬ: добавить его { read: ElementRef } ваш ViewChild;

Используйте его для своей кнопки MatButton. @ViewChild ("myButton", {read: ElementRef}) myButtonRef: ElementRef; Вам нужно использовать вашу кнопку как nativeElement ElementRef;

...