解决Angular Material Tab组件高度不占满父容器的问题

问题描述

在使用Angular Material的mat-tab组件时，开发者可能会遇到一个常见的问题：即使其父容器被明确设置了高度，mat-tab的内容区域（即mat-tab-body）也未能完全扩展以填充该高度，导致在组件下方出现不必要的空白。这通常发生在父容器采用Flexbox布局，并且mat-tab是其中一个子项的情况下。

例如，考虑以下HTML结构，其中horizontal-tab-group是一个封装了mat-tab的自定义组件：

<div class="left-wrapper">
    <horizontal-tab-group
        [tabs]="tabs"
        dataAutomation="TAB-GROUP"
        [selectedIndex]="selectedTabIndex"
        (selectedTabIndexChanged)="setActiveTab($event)"
    ></horizontal-tab-group>
    <ng-template #allTemplate dataAutomation="Count AllTemplate">
        <count-all></count-all>
    </ng-template>
    <ng-template #sumTemplate dataAutomation="Count Sum Template">
        <count-sum> </count-sum>
    </ng-template>
</div>

其对应的CSS样式可能如下，为left-wrapper设置了Flexbox布局和固定高度：

.left-wrapper {
    flex-basis: 44%;
    display: flex;
    flex-direction: column;
    height: 37rem; /* 父容器的高度 */
}

尽管left-wrapper具有固定的高度，但horizontal-tab-group内部的mat-tab组件可能不会自动继承或填充这37rem的高度，从而在底部留下空白。

问题根源分析

mat-tab组件的内部结构包含多个嵌套元素，其中与内容高度最直接相关的有两个：

1. .mat-tab-body-wrapper: 这是一个包裹所有标签页内容的容器。
2. .mat-tab-body.mat-tab-body-active: 这是当前激活标签页的具体内容区域。

默认情况下，这些内部元素可能没有被赋予height: 100%或等效的Flexbox属性来使其自动填充父容器的可用空间。当父容器（例如.left-wrapper）通过height属性设置了固定高度时，我们需要确保mat-tab的这些内部容器也能响应地占据该高度。

解决方案

解决此问题的关键在于精确地定位mat-tab组件的内部结构，并为其内容区域设置正确的高度。由于这些内部元素属于Angular Material组件的Shadow DOM或封装样式，我们通常需要使用特殊的CSS选择器来穿透组件样式封装。

以下是具体的CSS解决方案：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

.left-wrapper {
    flex-basis: 44%;
    display: flex;
    flex-direction: column;
    height: 37rem; /* 父容器的高度 */

    /* 穿透组件样式封装，设置 mat-tab 内部元素的高度 */
    ::ng-deep .mat-tab-body-wrapper {
        height: 37rem; /* 使内容包裹器与父容器高度一致 */
    }

    ::ng-deep .mat-tab-body.mat-tab-body-active {
        height: 37rem; /* 使当前激活的标签页内容区与父容器高度一致 */
    }
}

代码解释：

1. ::ng-deep: 这是一个特殊的Angular样式穿透选择器。它允许我们从组件的样式文件中，对其子组件或第三方组件的内部元素应用样式，即使这些元素被封装在Shadow DOM中。
2. .mat-tab-body-wrapper: 这个选择器针对的是Angular Material Tab组件中包裹所有标签页内容的主容器。通过设置其height: 37rem;，我们强制它与.left-wrapper保持相同的高度。
3. .mat-tab-body.mat-tab-body-active: 这个选择器进一步针对当前激活的标签页的具体内容区域。同样，将其高度设置为37rem确保了标签页内容本身能够完全填充其分配到的空间。

通过这两个规则，我们有效地将.left-wrapper的高度传递给了mat-tab的内部内容区域，从而消除了底部空白。

注意事项与最佳实践

• ::ng-deep 的使用与替代方案: ::ng-deep 是一个已弃用的选择器，尽管目前在许多项目中仍在使用。在未来的Angular版本中，它可能会被完全移除。推荐的替代方案包括：

  • 全局样式: 在styles.css或styles.scss等全局样式文件中定义这些样式，而不是在组件的样式文件中。
  • 不使用视图封装: 在组件的@Component装饰器中设置encapsulation: ViewEncapsulation.None。但这会使组件的样式成为全局样式，可能导致样式冲突，应谨慎使用。
  • CSS变量: 如果Material组件提供了相应的CSS变量来控制内部元素的尺寸，优先使用它们。
  • Host上下文选择器: 对于某些情况，可以使用:host ::ng-deep或更推荐的:host ::part()（如果组件支持Shadow DOM parts）来更安全地穿透样式。然而，对于mat-tab的内部结构，直接在全局样式中定义可能是最简单且兼容性最好的方法。

• 响应式设计: 在实际应用中，尽量避免使用固定的rem或px值来设置高度，除非是在非常特定的布局场景。更推荐使用height: 100%结合Flexbox或Grid布局，让元素能够自适应父容器的高度。例如，如果.left-wrapper的高度是动态的，那么将mat-tab-body-wrapper和mat-tab-body-active的高度也设置为100%会更具弹性。

  .left-wrapper {
      /* ...其他样式 */
      height: 100%; /* 或其他动态高度 */
  
      ::ng-deep .mat-tab-body-wrapper {
          height: 100%; /* 响应式地填充父容器 */
          display: flex; /* 如果内容需要进一步填充 */
          flex-direction: column;
      }
  
      ::ng-deep .mat-tab-body.mat-tab-body-active {
          height: 100%; /* 响应式地填充父容器 */
          flex: 1; /* 如果内部内容需要填充 */
          overflow: auto; /* 防止内容溢出 */
      }
  }

  登录后复制

  在上述响应式示例中，display: flex和flex: 1可以帮助mat-tab-body的子内容进一步填充可用空间，而overflow: auto则确保了当内容超出高度时能够滚动。

总结

当Angular Material mat-tab组件未能完全占据其父容器的高度时，通常是由于其内部的.mat-tab-body-wrapper和.mat-tab-body.mat-tab-body-active元素没有正确地扩展。通过使用::ng-deep（或将样式放置在全局样式中）并为这些内部元素明确设置与父容器相同的高度，可以有效解决此问题。在实施解决方案时，应优先考虑使用响应式的高度设置（如height: 100%）和现代CSS布局技术（如Flexbox），以创建更灵活和可维护的用户界面。

以上就是解决Angular Material Tab组件高度不占满父容器的问题的详细内容，更多请关注php中文网其它相关文章！