如何实现点击外部关闭Mat Select与Mat Datepicker？适配表格单元格编辑

你当前实现的普通输入框切换逻辑可以直接扩展到Mat Select和Mat Datepicker组件上，核心是针对这类组件的交互特性调整状态控制和事件处理，具体思路如下：

一、扩展状态标记，区分组件类型 #

在原有editableColumn和editableIndex的基础上，新增变量标记当前编辑的组件类型，避免组件内部交互（如下拉面板弹出、日期选择器打开）时误触发关闭：

editableColumn: string | null = null;
editableIndex: number | null = null;
// 标记当前编辑的组件类型
currentEditingComponentType: 'input' | 'select' | 'datepicker' | null = null;

edit(index: number, column: string, type: 'input' | 'select' | 'datepicker' = 'input') {
  this.editableColumn = column;
  this.editableIndex = index;
  this.currentEditingComponentType = type;
}

二、优化外部点击关闭逻辑 #

默认的外部点击关闭需要排除Mat组件的弹窗元素（如下拉面板、日期选择器弹窗），避免操作组件时意外退出编辑：

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

// 监听全局点击事件
@HostListener('document:click', ['$event'])
handleOutsideClick(event: Event) {
  const target = event.target as HTMLElement;
  // 判断点击目标是否属于Mat Select或Datepicker的弹窗区域
  const isMatComponentPanel = target.closest('.mat-select-panel') || target.closest('.mat-datepicker-popup');
  if (isMatComponentPanel) return;
  
  // 非组件弹窗区域点击，关闭编辑状态
  this.editableColumn = null;
  this.editableIndex = null;
  this.currentEditingComponentType = null;
}

三、模板中适配组件的显示切换 #

1. Mat Select 适配 #

编辑状态显示下拉选择器，非编辑状态显示选中值，可通过selectionChange事件选择后自动退出编辑：

<td (click)="edit(i, 'category', 'select')">
  <!-- 非编辑状态显示文本 -->
  <span *ngIf="showValue(i, 'category')">{{ data[i].category }}</span>
  <!-- 编辑状态显示Mat Select -->
  <mat-select 
    *ngIf="showInput(i, 'category')" 
    [(value)]="data[i].category"
    (selectionChange)="editableColumn = null; editableIndex = null"
  >
    <mat-option value="Option 1">Option 1</mat-option>
    <mat-option value="Option 2">Option 2</mat-option>
    <!-- 更多选项 -->
  </mat-select>
</td>

2. Mat Datepicker 适配 #

编辑状态显示日期选择器组件，非编辑状态格式化显示日期，利用closed事件在选择日期后退出编辑：

<td (click)="edit(i, 'date', 'datepicker')">
  <!-- 非编辑状态格式化显示日期 -->
  <span *ngIf="showValue(i, 'date')">{{ data[i].date | date:'yyyy-MM-dd' }}</span>
  <!-- 编辑状态显示Datepicker -->
  <div *ngIf="showInput(i, 'date')">
    <input 
      matInput 
      [matDatepicker]="picker" 
      [(ngModel)]="data[i].date"
    >
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker (closed)="editableColumn = null; editableIndex = null"></mat-datepicker>
  </div>
</td>

四、注意事项 #

• 确保在模块中导入MatSelectModule、MatDatepickerModule、MatNativeDateModule以及ReactiveFormsModule/FormsModule；
• 日期格式化需确保DatePipe已在模块中声明，或直接使用模板管道；
• 若需要保持编辑状态（比如选择后不自动退出），可移除selectionChange和closed事件中的关闭逻辑，让用户手动点击外部关闭。

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