如何将焦点设置在Mat Dialog内嵌组件中的元素上？

之前用#actions .btn-confirm-action作为autoFocus选择器没生效，大概率是Angular组件的视图封装导致选择器无法穿透到自定义组件内部，试试这几个可行方案：

方案一：给提交按钮加唯一ID，直接用ID选择器 #

直接给目标按钮加个全局唯一的ID，跳过组件封装的问题：

1. 在wknw-dialog-actions组件的提交按钮上添加ID：

<button mat-raised-button 
        [disabled]="submitDisabled" 
        [color]="confirmButtonColor" 
        (click)="confirmAction()" 
        class="btn-confirm-action"
        id="dialog-submit-btn">
    {{confirmButtonTitle}}
</button>

2. 配置MatDialog的autoFocus：

const dialogConfig: MatDialogConfig = {
    autoFocus: '#dialog-submit-btn'
}

方案二：禁用自定义组件的视图封装 #

如果允许的话，给wknw-dialog-actions组件禁用视图封装，让外部选择器能匹配内部元素：
在wknw-dialog-actions.component.ts里修改组件元数据：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'wknw-dialog-actions',
  templateUrl: './wknw-dialog-actions.component.html',
  styleUrls: ['./wknw-dialog-actions.component.css'],
  encapsulation: ViewEncapsulation.None // 禁用视图封装
})
export class WknwDialogActionsComponent {
  // 组件原有逻辑...
}

这样之前的#actions .btn-confirm-action选择器就能正常生效了（前提是已经给<wknw-dialog-actions>加了id="actions"）。

方案三：弹窗打开后手动聚焦 #

用MatDialog的afterOpened钩子，在弹窗加载完成后手动查找并聚焦按钮：

const dialogRef = this.matDialog.open(ContactGroupEditComponent, dialogConfig);

dialogRef.afterOpened().subscribe(() => {
  // 从弹窗根元素里查找提交按钮
  const submitBtn = dialogRef.nativeElement.querySelector('.btn-confirm-action');
  if (submitBtn) {
    submitBtn.focus();
  }
});

方案四：通过组件内部引用实现聚焦（最符合Angular封装理念） #

在自定义组件里暴露聚焦方法，让父组件调用：

1. 在wknw-dialog-actions.component.ts里添加视图引用和聚焦方法：

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

@Component({
  selector: 'wknw-dialog-actions',
  templateUrl: './wknw-dialog-actions.component.html'
})
export class WknwDialogActionsComponent {
  @ViewChild('submitBtn') submitBtn!: ElementRef<HTMLButtonElement>;

  // 暴露聚焦方法
  focusSubmitButton() {
    this.submitBtn.nativeElement.focus();
  }

  // 组件原有逻辑...
}

2. 给按钮添加模板引用变量：

<button mat-raised-button 
        [disabled]="submitDisabled" 
        [color]="confirmButtonColor" 
        (click)="confirmAction()" 
        class="btn-confirm-action"
        #submitBtn>
    {{confirmButtonTitle}}
</button>

3. 在弹窗组件contact-group-edit.component.ts里调用聚焦方法：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { WknwDialogActionsComponent } from './path-to-your-component/wknw-dialog-actions.component';

@Component({
  selector: 'contact-group-edit',
  templateUrl: './contact-group-edit.component.html'
})
export class ContactGroupEditComponent implements AfterViewInit {
  @ViewChild(WknwDialogActionsComponent) dialogActions!: WknwDialogActionsComponent;

  ngAfterViewInit() {
    // 视图初始化完成后调用聚焦方法
    this.dialogActions.focusSubmitButton();
  }

  // 组件原有逻辑...
}

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