如何将 matButton 设置为活动（聚焦）Angular？

Question

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

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

我认为这是 Material 按钮的缺陷。

如何在最后的 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-button #btnFocus=matButton [autofocus]="btnFocus.focus()">Post</button>

Answer 3

看起来有角材料已经有这方面的指令。检查角度 A11y

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