Angular 11 Material Drawer单击菜单表单未绑定需双击生效

问题复现 #

基于Angular 11使用mat-drawer-container搭建侧边抽屉布局时，单击左侧菜单切换面板，目标面板内的表单字段无法完成数据绑定，必须双击菜单才能正常渲染表单：

• 单击未绑定异常效果：
• 双击后正常渲染效果：

当前布局核心代码：

<mat-drawer-container>
  <mat-drawer [autoFocus]="false" [mode]="side" [opened]="true">
    <ng-container *ngFor="let panel of panels; trackBy: trackByFn">
      <div (click)="goToPanel(panel.id)">
        <mat-icon [svgIcon]="panel.icon"></mat-icon>
        <div>{{title}}</div>
        <div>{{description}}</div>
      </div>
    </ng-container>
  </mat-drawer>

  <mat-drawer-content>
    <ng-container [ngSwitch]="selectedPanel">
      <ng-container *ngSwitchCase="'accounts'"><accounts-settings></accounts-settings></ng-container>
    </ng-container>
  </mat-drawer-content>
</mat-drawer-container>

问题原因 #

该问题是Mat Drawer内部事件处理逻辑和Angular变更检测时机不匹配导致的：

1. 配置[autoFocus]="false"后，Mat Drawer仍会在点击事件触发时优先执行内部焦点、选中状态的处理逻辑，拦截了第一次点击事件的变更检测向上传播
2. 通过*ngSwitch动态渲染的表单类子组件，在第一次点击时仅完成了selectedPanel变量更新，子组件内部表单控件的初始化绑定没有赶上当前变更检测周期，需要第二次点击触发新一轮变更检测才能完成渲染。

修复方案 #

任选以下一种方案即可实现单击正常渲染：

方案1：手动触发变更检测（改动最小，优先推荐） #

在组件中注入ChangeDetectorRef，在菜单点击切换面板的方法中，更新选中值后手动触发变更检测即可：

// 1. 引入依赖
import { ChangeDetectorRef } from '@angular/core';

export class SettingsComponent {
  // 2. 注入服务
  constructor(private cdr: ChangeDetectorRef) {}

  // 3. 修改跳转方法
  goToPanel(panelId: string) {
    this.selectedPanel = panelId;
    // 手动触发变更检测，强制同步渲染子组件
    this.cdr.detectChanges();
  }
}

方案2：将点击逻辑放入NgZone执行 #

如果项目中存在其他脱离Angular上下文的逻辑，可将面板切换逻辑包裹在NgZone.run中执行，确保逻辑运行在Angular变更检测上下文内：

import { NgZone } from '@angular/core';

export class SettingsComponent {
  constructor(private ngZone: NgZone) {}

  goToPanel(panelId: string) {
    this.ngZone.run(() => {
      this.selectedPanel = panelId;
    });
  }
}

方案3：关闭Mat Drawer焦点恢复默认配置 #

给mat-drawer标签添加[restoreFocus]="false"配置，关闭抽屉默认的焦点拦截逻辑，避免事件被内部处理拦截：

<mat-drawer [autoFocus]="false" [restoreFocus]="false" [mode]="side" [opened]="true">
  <!-- 原有菜单内容不变 -->
</mat-drawer>

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