如何在 angular material 中删除步进器 header 上的默认焦点？

Question

我在 angular 中使用 angular material 库创建了一个简单的应用程序，我在其中使用了对话框组件。当用户打开对话框时，它将具有 angular material 的步进器组件。它有 3 个步骤。每个步骤都有 angular 反应形式。我面临的问题是，当用户打开对话框时，焦点直接在步进器 header 的第一步上完成。我想在第一步专注于反应形式的第一种形式控制。

<mat-form-field class="name">
<input
  matInput
  formControlName="description"
  #name
/>
</mat-form-field>

在component.ts文件中，我写了

@ViewChild('name', { static: true, read: ElementRef }) name: ElementRef;

并且在 ngAfterViewInit 方法中，我在名称变量上调用了 focus 方法，例如：

ngAfterViewInit() {
   this.name.nativeElement.focus();
}

它有效，但我得到的输出就像它首先关注 FormControl 然后再次将焦点移动到步进器 header 的第一步。 我应该如何防止焦点从步进器 header 的第一步开始并保持焦点在第一个 FormControl 上？

Answer 1

在元素上使用此指令，其中预期初始焦点：cdkFocusInitial，如果这还不够，请查看 here。