如何设置 matButton 活动（聚焦）Angular？答案

【问题标题】：How to set matButton active (focused) Angular?如何设置 matButton 活动（聚焦）Angular？
【发布时间】：2021-08-04 10:40:59
【问题描述】：

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

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

我认为是Material按钮的不完善。

如何在最后一个 Angular 中设置聚焦材质按钮？

【问题讨论】：

【解决方案1】：

您可以在组件的生命周期钩子 ngAfterViewInit 处将焦点设置为按钮，例如：

模板

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

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

看起来 Angular 材质已经有了相应的指令。检查Angular A11y

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

【讨论】：

【解决方案4】：

可以使用MatButton的focus方法。

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

@ViewChild('button') button;

ngOnInit() {
  this.button.focus()
}

【讨论】：

【解决方案5】：

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

【讨论】：