使用 Angular material 扩展面板自动对焦

Question

我是 Angular 的新手，正在尝试在 material 扩展面板中使用 material 输入组件。我希望 input 在展开扩展面板时自动对焦。但是 autofocus="autofocus" 由于某种原因似乎在输入字段上不起作用。我看到 material 文档中有一个 focus 方法可用，但我不确定如何使用它。这是代码： `

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name 
      </mat-panel-description>
    </mat-expansion-panel-header>
    <mat-form-field>
      <input matInput placeholder="First name" autofocus="autofocus">
    </mat-form-field>
  </mat-expansion-panel>
</mat-accordion>

`

Answer 1

使用

(focus)="myFocusMethod($event, orPassAnyVars)"

一般：在Angular应用中广泛使用的热门事件如下：

(focus)="myMethod()"
(blur)="myMethod()"

(submit)="myMethod()"

(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

(click)="myMethod()"
(dblclick)="myMethod()"

(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"

您可以使用 $event 作为 funtion() 参数来捕获事件。谢谢

使用 Angular material 扩展面板自动对焦

Autofocus with Angular material Expansion pannel

input

autofocus

angular-material

angular