angular - 打开菜单时如何聚焦输入元素？

Question

<button mat-button id="categories-button" [mat-menu-trigger-for]="categoryList">
  <span>categories</span>
  <mat-icon id="drop-arrow">arrow_drop_down</mat-icon>
</button>
<mat-menu #categoryList>
  <mat-form-field appearance="standard" id="category-search-wrapper">
    <input (click)="$event.stopPropagation()" matInput id="category-search">
  </mat-form-field>

  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

我希望category-search输入集中，当菜单打开时，问题是它似乎还没有准备好，当 menuOpened 事件被发出时。打开菜单时如何聚焦输入元素？

标签： angularangular-material

Answer 1

<button id="categories-button" [mat-menu-trigger-for]="categoryList" (menuOpened)="this.categoryListOpened()">
  <span>categories</span>
  <mat-icon id="drop-arrow">arrow_drop_down</mat-icon>
</button>
<mat-menu #categoryList>
  <mat-form-field appearance="standard" id="category-search-wrapper">
    <input matInput id="category-search" (click)="$event.stopPropagation()">
  </mat-form-field>

  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

categoryListOpened() {
  setTimeout(() => {
    this.categorySearch.focus();
  });
}

1. 添加(menuOpened)="this.categoryListOpened()"到按钮，打开菜单
2. categoryListOpened像上面一样在组件的类中声明方法