Question

我想通过按键触发点击事件，我有这个简单的组件：

<mat-radio-group [(ngModel)]="selected" aria-label="Select an option">
  <mat-radio-button #first value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

我想引发点击事件：

this.matRadioButton._elementRef.nativeElement.click();

但它不起作用。

stackblitz

Answer 1

您快到了。除了可以在_elementRef属性上调用事件以外，还可以在_inputElement属性上调用它。您可以使用dispatchEvent()函数来触发事件，而不是直接调用click事件。

尝试以下

export class RadioOverviewExample {
  selected: string;
  @ViewChild('first', {static: false}) matRadioButton : MatRadioButton;

  constructor() {
    setTimeout(() =>{
      let event = new MouseEvent('click', {bubbles: true});
      this.matRadioButton._inputElement.nativeElement.dispatchEvent(event);
    }, 1000);
  }
}

我已经修改了您的Stackblitz。

更新：触发事件监听器

由于我们是在this.matRadioButton._inputElement上触发事件，因此可以使用RxJS fromEvent函数绑定到同一元素的click事件。

尝试以下

import { Subject, Observable, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

...
export class RadioOverviewExample implements AfterViewInit, OnDestroy {
  selected: string;
  clickCount: number = 0;             // <-- use to close open subscriptions
  complete$ = new Subject<any>();

  @ViewChild('first', {static: false}) matRadioButton : MatRadioButton;
  
  constructor() {
    setTimeout(() => {
      let event = new MouseEvent('click', {bubbles: true});
      this.matRadioButton._inputElement.nativeElement.dispatchEvent(event);
    }, 1000);
  }

  ngAfterViewInit() {
    fromEvent(this.matRadioButton._inputElement.nativeElement, 'click').pipe(
      takeUntil(this.complete$)
    ).subscribe(
      res => { this.clickCount++ }    // <-- click event handler
    );
  }

  ngOnDestroy() {
    this.complete$.next();            // <-- close open subscriptions
  }
}

RxJS takeUntil运算符用于关闭ngOnDestroy()挂钩中的所有打开的订阅，以避免潜在的内存泄漏。

我已经更新了您的Stackblitz。

如何在角形材料单选按钮上引发单击事件？

1 个答案:

更新：触发事件监听器