Angular Material mat-card全屏切换实现及组件状态管理方案咨询

嘿，这个需求我之前在做Angular Material门户项目的时候也折腾过，给你几个落地性强的方案参考，刚好贴合你想复用组件的思路～

你想复用同一组件的方向完全没问题，核心要解决两个关键点：状态同步（展开/收起、数据）和显示模式切换（网格/全屏），下面分具体方案细说：

方案1：用单例服务统一管理状态（适合自定义全屏逻辑） #

因为卡片状态和数据原本存在组件内部，多个组件实例（网格里的和全屏的）会各自维护状态，很容易出现不同步的情况。用单例服务就能把状态和数据抽出来统一管控：

1. 创建一个CardPortalService：

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   import { CardData } from './card.model';
   
   @Injectable({ providedIn: 'root' })
   export class CardPortalService {
     // 当前展开的卡片ID，null代表收起状态
     currentExpandedCardId$ = new BehaviorSubject<string | null>(null);
     // 所有卡片数据集合
     cards$ = new BehaviorSubject<CardData[]>([]);
   
     // 更新展开状态
     setExpandedCardId(id: string | null) {
       this.currentExpandedCardId$.next(id);
     }
   
     // 更新卡片数据（保证多实例同步）
     updateCardData(updatedCard: CardData) {
       const currentCards = this.cards$.value;
       const index = currentCards.findIndex(c => c.id === updatedCard.id);
       if (index !== -1) {
         currentCards[index] = updatedCard;
         this.cards$.next([...currentCards]);
       }
     }
   }
   

2. 网格里的卡片组件：

   • 订阅服务状态，点击时通知服务切换展开状态
   • 根据mode="grid"调整样式（比如固定宽度、适配网格布局）

   <mat-card 
     [ngClass]="{'grid-card': true}"
     (click)="onExpandCard(card.id)"
   >
     <mat-card-title>{{card.title}}</mat-card-title>
     <mat-card-content>{{card.previewContent}}</mat-card-content>
   </mat-card>
   

   import { Component, Input } from '@angular/core';
   import { CardPortalService } from '../card-portal.service';
   import { CardData } from '../card.model';
   
   @Component({
     selector: 'app-card',
     templateUrl: './card.component.html',
     styleUrls: ['./card.component.scss']
   })
   export class CardComponent {
     @Input() card!: CardData;
     @Input() mode: 'grid' | 'fullscreen' = 'grid';
   
     constructor(private cardService: CardPortalService) {}
   
     onExpandCard(id: string) {
       this.cardService.setExpandedCardId(id);
     }
   }
   

3. 全屏展示容器组件：

   • 订阅服务的currentExpandedCardId$，当有选中卡片时渲染全屏模式的app-card
   • 给全屏卡片加样式：position: fixed; top:0; left:0; width:100vw; height:100vh; z-index:1000，确保覆盖其他内容

   <div *ngIf="currentExpandedCard$ | async as card" class="fullscreen-container">
     <app-card 
       [card]="card"
       mode="fullscreen"
       (click)="onCollapseCard()"
     ></app-card>
   </div>
   

   import { Component } from '@angular/core';
   import { CardPortalService } from './card-portal.service';
   import { Observable } from 'rxjs';
   import { switchMap } from 'rxjs/operators';
   import { CardData } from './card.model';
   
   @Component({
     selector: 'app-fullscreen-card-container',
     templateUrl: './fullscreen-card-container.component.html',
     styleUrls: ['./fullscreen-card-container.component.scss']
   })
   export class FullscreenCardContainerComponent {
     currentExpandedCard$: Observable<CardData | undefined>;
   
     constructor(private cardService: CardPortalService) {
       this.currentExpandedCard$ = this.cardService.currentExpandedCardId$.pipe(
         switchMap(id => this.cardService.cards$.pipe(
           map(cards => cards.find(c => c.id === id))
         ))
       );
     }
   
     onCollapseCard() {
       this.cardService.setExpandedCardId(null);
     }
   }
   

方案2：用Angular Material Dialog替代全屏组件（更快捷） #

其实不用单独写全屏组件，直接用MatDialog打开同一个CardComponent作为全屏弹窗，自带遮罩和关闭逻辑，省掉很多状态管理的麻烦：

1. 网格卡片的点击事件改成打开Dialog：

   import { Component, Input } from '@angular/core';
   import { MatDialog } from '@angular/material/dialog';
   import { CardData } from '../card.model';
   import { CardComponent } from './card.component';
   
   @Component({
     selector: 'app-grid-card',
     templateUrl: './grid-card.component.html',
     styleUrls: ['./grid-card.component.scss']
   })
   export class GridCardComponent {
     @Input() card!: CardData;
   
     constructor(private dialog: MatDialog) {}
   
     openFullscreenCard() {
       this.dialog.open(CardComponent, {
         width: '100vw',
         height: '100vh',
         maxWidth: '100vw', // 覆盖MatDialog默认的max-width限制
         panelClass: 'fullscreen-dialog',
         data: this.card // 把当前卡片数据传给弹窗里的组件
       });
     }
   }
   

2. 在CardComponent里接收Dialog传入的数据：

   import { Component, Inject, Input } from '@angular/core';
   import { MAT_DIALOG_DATA } from '@angular/material/dialog';
   import { CardData } from '../card.model';
   
   @Component({
     selector: 'app-card',
     templateUrl: './card.component.html',
     styleUrls: ['./card.component.scss']
   })
   export class CardComponent {
     @Input() card!: CardData;
   
     // 如果是在Dialog里打开，用这个注入数据
     constructor(@Inject(MAT_DIALOG_DATA) public dialogData: CardData) {
       if (dialogData) {
         this.card = dialogData;
       }
     }
   }
   

3. 给全屏Dialog加样式优化：

   .fullscreen-dialog {
     padding: 0;
     margin: 0;
     .mat-dialog-container {
       padding: 2rem;
       height: 100%;
       overflow: auto;
     }
   }
   

方案对比与推荐 #

• 如果需要完全自定义全屏的行为（比如支持拖拽、多卡片切换），选方案1，灵活度更高，但需要自己维护状态和样式。
• 如果只是简单的展开/收起需求，选方案2，借助Angular Material的Dialog组件，代码量少，自带的模态框逻辑很成熟。

最后提醒：不管用哪种方案，尽量把卡片数据从组件内部移到服务里，这样网格和全屏的卡片数据能实时同步，避免出现数据不一致的问题～

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