如何在mat-dialog中仅展示指定mat-table而非完整组件页面

解决方案 #

你可以通过以下两种规范方案实现需求，不推荐直接通过DOM ID抓取元素渲染弹窗，容易出现数据不响应、样式丢失的问题：

方案1：通过弹窗传参控制原组件的显示状态（改造成本最低）

这是Angular Material Dialog 官方推荐的传参控制逻辑，不需要额外开发新组件：

1. 修改触发方法，在调用dialog.open()时传入你要展示的表格ID作为参数
   TS代码修改：

   constructor(public dialog: MatDialog) { }
     
   // 新增入参接收要展示的表格ID
   openDialog(targetTableId: string) {
     this.dialog.open(UserProfileComponent, {
       // 把表格ID通过data参数传给弹窗组件
       data: {
         showTableOnly: true,
         targetTableId: targetTableId
       }
     });
   }
   

   HTML代码修改：

   <a value="case1" (click)="openDialog('case1')">Click for details</a>
   

2. 在UserProfileComponent中接收弹窗参数

   import { MAT_DIALOG_DATA } from '@angular/material/dialog';
   import { Inject } from '@angular/core';
   
   // 注入MAT_DIALOG_DATA接收传入的参数
   constructor(@Inject(MAT_DIALOG_DATA) public dialogData?: any) { }
   

3. 在UserProfileComponent的HTML模板中通过条件渲染控制显示内容

   <!-- 只在非弹窗场景下展示的其他页面内容 -->
   <ng-container *ngIf="!dialogData?.showTableOnly">
     <!-- 原页面其他不需要在弹窗展示的内容都放这里 -->
   </ng-container>
   
   <!-- 仅匹配到对应表格ID时展示指定表格 -->
   <table mat-table *ngIf="dialogData?.targetTableId === 'case1'" id="case1">
     <!-- 表格原有逻辑 -->
   </table>
   
   <table mat-table *ngIf="dialogData?.targetTableId === 'case2'" id="case2">
     <!-- 其他表格逻辑 -->
   </table>
   

   改造完成后，UserProfileComponent单独作为页面访问时会显示全部内容，作为弹窗打开时只会展示指定的表格。

方案2：抽离公共表格组件（耦合度更低，更易维护）

你可以把所有表格的逻辑抽成独立的公共组件，再单独开发一个专用的弹窗组件，只引用对应ID的公共表格组件。原页面和弹窗组件共用同一套表格逻辑，不会出现代码冗余，后续修改表格只需要改公共组件即可。

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