如何在 angular 中调用 datepicker.close() 后将焦点设置到 datepicker 或输入字段

Question

我有一个 angular 页面。 在mat-form-field ，我创建了一个仅获取年份和月份的datepicker ，因此我创建了一个onMonthSelect function。

选择器.component.html

    <input
       matInput
       [matdatePicker]="picker"
     >
    <mat-datepicker #picker (monthSelected)="onMonthSelect($envent, picker)">
    </mat-datepicker>*

选择器.component.ts

    onMonthSelect(date: Moment, datepicker){<br>
       datepicker.close();*

            Here I want to put the focus back to matInput

    }

调用 datepicker.close datepicker.close()后，焦点或 cursor 会转到页面顶部的某个位置，而不是下一个输入字段。 当我在datepicker关闭后按 tab 时，它会聚焦在顶部而不是下一个<div>或组件。 我想将焦点强制回到 go 回到matInput或matPicker 。 我试过tabindex ，但不工作。

Answer 1

它已为您closed ，名称为 Output。

您可以通过返回这样的任何函数来获取关闭事件

<mat-datepicker #picker (closed)="closeEvent($event)"></mat-datepicker>

或者只是将焦点设置到其他元素

<mat-datepicker #picker2 (closed)="fieldB.focus()"></mat-datepicker>

示例： 堆栈闪电战

参考： https://material.angular.io/components/datepicker/api

Answer 2

ts：

datePickerFocus(){
  setTimeout(() => { 
  document.getElementById('picker2')?.focus(); ]
  }, 100);
}

html：

<mat-datepicker #picker2 (closed)="datePickerFocus()"></mat-datepicker>