如何将 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

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

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

Answer 3

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

Answer 4

您可以使用

MatButton

的focus方法。

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

@ViewChild('button') button;

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

Answer 5

添加一个简单的

autofocus

指令

autofocus

属性的问题在于它具有以下行为（请参阅 此处完整源代码，了解 MDN

 上关于 

autofocus 的更多信息）：

autofocus

全局属性是一个布尔属性，指示元素应集中在页面加载时，或者当显示其所属的

<dialog>

时。

因此，如果您的按钮或输入元素稍后渲染，自动对焦将无法按预期工作。

您可以通过将现有属性包装在您自己的自定义指令中来轻松更改此行为，该指令在初始化时也将关注该元素。您只需要几行代码；我的看起来像这样并且运行良好：

import { AfterViewInit, Directive, ElementRef } from '@angular/core';

// This directive makes autofocus work for form input elements that are rendered after initial page load
@Directive({
  selector: 'input',
})
export class AutoFocusDirective implements AfterViewInit {

  constructor(public elementRef: ElementRef) {
  }

  public ngAfterViewInit(): void {
    if (this.elementRef.nativeElement.autofocus) {
      this.elementRef.nativeElement.focus();
    }
  }
}

注意： 确保全局加载此指令，或者确保每次您需要此自定义行为时不要忘记在模块中加载该指令，否则您会用头撞墙，想知道为什么它不这样做。不工作...

Answer 6

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