Angular Material对话框cdkFocusInitial二次打开不聚焦问题求助

cdkFocusInitial仅在组件首次初始化时生效，而Angular Material对话框默认会缓存组件实例——关闭对话框后组件并未被销毁，再次打开时不会重新触发初始化逻辑，因此焦点无法自动设置到Yes按钮。以下是几种可行的解决方法：

方法1：设置对话框关闭时销毁组件 #

打开对话框时添加destroyOnClose: true配置，强制每次关闭对话框都销毁组件实例，再次打开时重新创建，让cdkFocusInitial重新生效：

openDialog(){
  let dialogpopupref = this.matdialog.open(DialogpopupComponent, {
    destroyOnClose: true // 新增配置
  });
  dialogpopupref.afterClosed().subscribe(result=>{
    console.log("dialog result is" + result);
    if(result == "true"){
      console.log("in true");
    }
  });
}

方法2：手动在对话框打开后设置焦点 #

步骤1：给按钮添加模板引用变量 #

修改对话框组件的HTML，给Yes按钮加上#yesBtn：

<h2 mat-dialog-title>Confirm Submit</h2>
<mat-dialog-actions>
  <button #yesBtn mat-button mat-raised-button cdkFocusInitial mat-dialog-close="true" style="margin-right: 5px;">Yes</button>
  <button mat-button mat-raised-button mat-dialog-close="false">Cancel</button>
</mat-dialog-actions>

步骤2：在组件中手动触发焦点 #

通过对话框的afterOpened钩子，在对话框打开后主动获取按钮并设置焦点：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialogpopup',
  templateUrl: './dialogpopup.component.html'
})
export class DialogpopupComponent {
  @ViewChild('yesBtn') yesBtn!: ElementRef<HTMLButtonElement>;

  constructor(public dialogRef: MatDialogRef<DialogpopupComponent>) {
    this.dialogRef.afterOpened().subscribe(() => {
      // 用setTimeout确保视图渲染完成
      setTimeout(() => {
        this.yesBtn.nativeElement.focus();
      });
    });
  }
}

方法3：使用CdkFocusMonitor管理焦点 #

借助Angular CDK的CdkFocusMonitor组件，更规范地管理焦点状态：

import { Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { CdkFocusMonitor } from '@angular/cdk/a11y';

@Component({
  selector: 'app-dialogpopup',
  templateUrl: './dialogpopup.component.html'
})
export class DialogpopupComponent implements OnDestroy {
  @ViewChild('yesBtn') yesBtn!: ElementRef<HTMLButtonElement>;

  constructor(
    public dialogRef: MatDialogRef<DialogpopupComponent>,
    private focusMonitor: CdkFocusMonitor
  ) {
    this.dialogRef.afterOpened().subscribe(() => {
      this.focusMonitor.focusVia(this.yesBtn.nativeElement, 'program');
    });
  }

  ngOnDestroy() {
    // 组件销毁时清理焦点监听
    this.focusMonitor.stopMonitoring(this.yesBtn.nativeElement);
  }
}

对应的HTML同样需要添加#yesBtn模板引用变量。

内容的提问来源于stack exchange，提问作者Reegan