如何设置matButton活动（聚焦）角度？

Question

当用户第一次和之后进入页面时，放置的按钮未聚焦并以灰色突出显示。我试图设置自动对焦：

<button mat-raised-button color="primary" autofocus>{{'recovery' | translate}}</button>

我认为这是“材质”按钮的缺陷。

如何在上一个Angular中设置聚焦材料按钮？

Answer 1

您只需将焦点设置在组件生命周期挂钩 ngAfterViewInit 上的按钮上即可，例如：

模板

<button mat-raised-button color="primary" #btnRef="matButton">{{'recovery' | translate}}</button>

Ts文件

...
@ViewChild('btnRef') buttonRef: MatButton;
...
ngAfterViewInit() {
   this.buttonRef.focus();
}
...

希望有帮助。

Answer 2

您可以使用按钮的聚焦方法

<button mat-raised-button #button{{'recovery' | translate}}</button>


 @ViewChild('button') button
 ngOnInit() {
      this.button.focus()
 }

Answer 3

看起来角材料已经对此具有指令。选中Angular A11y

<button mat-button cdkFocusInitial>Ok</button>

Answer 4

<button mat-button #btnFocus=matButton [autofocus]="btnFocus.focus()">Post</button>

Answer 5

<button mat-raised-button color="primary" #btn [autofocus]="btn.focus()">{{'recovery' | translate}}</button>