Angular Material对话框渲染延迟、绑定失效问题求助

我有一个基于Angular 17的应用，使用了Angular Material和Angular Monaco editor v2。应用中Monaco编辑器绑定了CTRL+P快捷键，按下后会弹出包裹HelloComponent的对话框——这是一个仅含单个输入框的测试组件，用于输入名称。

问题：打开对话框时，渲染存在明显延迟，甚至Material样式无法正常显示，数据绑定也异常缓慢直至失效。已尝试分离变更检测并在对话框关闭后重新附加，但无任何改善。对话框内组件逻辑简单，本身不存在性能问题。

复现项目说明 #

为了让名称输入组件既能作为普通组件使用，又能被包裹在Material对话框中，其构造函数注入了可选的MatDialogRef（用于关闭对话框并返回数据）和通过MAT_DIALOG_DATA令牌注入的可选数据。数据类型为HelloData，仅包含一个name字符串属性。弹出框会显示接收到的名称（如有）并允许编辑，点击OK后返回新名称。

在容器组件侧，通过Monaco实例的CTRL+P快捷键触发insertText方法打开对话框，该方法获取Monaco中当前选中的文本，并将其作为可编辑名称传入对话框。对话框通过OK关闭后，容器组件会将选中内容替换为新名称（如有）。

组件模板代码 #

<div>
  <form [formGroup]="form" (submit)="save()">
    <mat-form-field>
      <input
        type="text"
        matInput
        [formControl]="inputName"
        placeholder="name"
      />
    </mat-form-field>
    <p>Hello, {{ inputName.value }}!</p>
    <button mat-flat-button type="submit">OK</button>
  </form>
</div>

组件对应代码 #

export interface HelloData {
  name?: string;
}

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatFormFieldModule,
    MatDialogModule,
    MatInputModule,
  ],
  templateUrl: './hello.component.html',
  styleUrl: './hello.component.css',
})
export class HelloComponent {
  public inputName: FormControl<string | null>;
  public form: FormGroup;

  constructor(
    formBuilder: FormBuilder,
    @Optional()
    public dialogRef?: MatDialogRef<HelloComponent>,
    @Optional()
    @Inject(MAT_DIALOG_DATA)
    public data?: HelloData
  ) {
    this.inputName = formBuilder.control(data?.name || null);
    this.form = formBuilder.group({
      name: this.inputName,
    });
  }

  public save(): void {
    this.dialogRef?.close(this.inputName.value);
  }
}

对话框打开与关闭的代码 #

private async promptName(name?: string): Promise<string | undefined> {
  this._cd.detach();
  const dialogRef = this._dialog.open(HelloComponent, {
    data: {
      name,
    },
  });
  const result: HelloData | undefined = await firstValueFrom(
    dialogRef.afterClosed()
  );
  this._cd.reattach();
  this._cd.detectChanges();
  return result?.name;
}

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