angular - 如何将 Angular Material mat-card 切换为全屏

Question

我正在尝试使用 Angular Material 模拟门户样式页面，该页面显示卡片网格，并且每张卡片都应该可以扩展以占据容器(即大部分可见页面)。当一张卡片展开时，所有其他卡片都被覆盖(不可见)。卡片有状态/数据，目前主要包含在卡片的组件中。

我正在寻找一个好的设计来支持这一点。我最初的想法是我可以在两个地方使用相同的组件，一次作为全屏，一次作为卡片的内容，结合 ngIf 来显示或隐藏组件。但我认为要使其发挥作用，我必须将数据保存在组件之外的服务中，并且我试图避免进行此更改。任何建议表示赞赏。

Answer 1

我花了一些时间研究它，一个简单的解决方案是根据某些条件在卡片上切换一个额外的类。即:

<mat-card [ngClass]="{'fullscreen': isCardExpanded}"></mat-card>

.mat-card {
  position: fixed;
  transition: all 1s linear;
}

.fullscreen {
  background-color: red;
  width: 100%;
  height: 100%;
}

看看这个working demo .