如何以编程方式单击材料元素？

Question

我可以使用elementref以编程方式单击按钮元素，但是如果按钮属于实质性按钮，那么它将不起作用

@ViewChild('findButton') findButton: ElementRef;
  clicked() {
  console.log('clicked');
}
ngOnInit() {
  this.findButton.nativeElement.click()
}

在模板中

<div class="example-button-row">
  <button #findButton (click)="clicked()" mat-raised-button color="primary">Primary</button>
</div>

mat-raised-button属性正在创建问题。这是compatibility matrix in official documentation on stackblitz

Answer 1

使用MatButton作为其类型，而不是ElementRef

@ViewChild('findButton') findButton: MatButton;
clicked() {
  console.log('clicked');
}

ngOnInit() {
  this.findButton._elementRef.nativeElement.click();
}

分叉的DEMO

Answer 2

您可以使用以下语法检索与ElementRef关联的MatButton：

@ViewChild('findButton', { read: ElementRef }) findButton: ElementRef;

有关演示，请参见this stackblitz。