Angular mat-tab 高度自适应与内容区域填充教程

问题描述：mat-tab 内容区域高度不足

在使用 angular material 的 mat-tab 组件时，开发者有时会遇到标签页内容区域无法完全填充其父容器高度的问题，导致在底部出现不必要的空白区域。这通常发生在父容器具有固定高度，而 mat-tab 内部的 mat-tab-body-wrapper 和 mat-tab-body 元素没有自动扩展以占据所有可用空间时。

考虑以下 HTML 结构和 CSS 样式：

<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 {
    flex-basis: 44%;
    display: flex;
    flex-direction: column;
    height: 37rem; /* 父容器具有固定高度 */
}

尽管 left-wrapper 被设置为 display: flex; flex-direction: column; 且具有 37rem 的固定高度，但其子组件 horizontal-tab-group 内部的 mat-tab 内容区域（由 count-all 或 count-sum 组件渲染）可能未能完全填充 horizontal-tab-group 组件分配到的高度，从而在底部留下空白。

解决方案：CSS 样式覆盖

解决此问题的核心在于精确控制 Angular Material mat-tab 组件内部的关键元素的高度。通过定位 mat-tab-body-wrapper 和 mat-tab-body.mat-tab-body-active 这两个元素，并强制它们的高度与父容器期望的高度一致，即可消除底部空白。

以下是修正后的 CSS 样式：

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

    /* 使用 ::ng-deep 穿透组件封装，修改 mat-tab 内部样式 */
    ::ng-deep .mat-tab-body-wrapper {
        height: 37rem; /* 使内容区域包装器占据指定高度 */
    }

    ::ng-deep .mat-tab-body.mat-tab-body-active {
        height: 37rem; /* 使当前激活的标签页内容占据指定高度 */
    }
}

代码解析与原理

1. left-wrapper 样式：

   • height: 37rem;：明确设定了父容器 left-wrapper 的总高度。
   • display: flex; flex-direction: column;：将父容器设置为弹性容器，并使其子项垂直堆叠。这为子组件提供了弹性布局的基础。

2. ::ng-deep 选择器：

   • ::ng-deep 是一个特殊的 Angular 深度选择器（现已废弃，但仍广泛存在于旧代码库中），它允许样式穿透组件的视图封装（View Encapsulation），从而修改组件内部元素的样式。在本例中，它用于访问 mat-tab 组件内部的 mat-tab-body-wrapper 和 mat-tab-body。

3. .mat-tab-body-wrapper：

   

   魔乐社区

   天翼云和华为联合打造的AI开发者社区，支持AI模型评测训练、全流程开发应用

   102

   查看详情
   • 这是 mat-tab 组件中包裹所有标签页内容的容器。默认情况下，它的高度可能不会自动拉伸。通过设置 height: 37rem;，我们强制这个包装器占据与 left-wrapper 相同的指定高度。

4. .mat-tab-body.mat-tab-body-active：

   • mat-tab-body 是单个标签页内容的实际容器。.mat-tab-body-active 类表示当前激活并显示内容的标签页。通过对其设置 height: 37rem;，我们确保当前可见的标签页内容能够完全填充其分配到的空间。

通过以上修改，mat-tab 的内容区域将被强制扩展到 37rem 的高度，从而消除底部空白，使页面布局看起来更加完整和专业。

注意事项与最佳实践

1. ::ng-deep 的替代方案：

   • ::ng-deep 已被废弃，不推荐在新项目中使用。在现代 Angular 应用中，有更推荐的替代方案：
     • 全局样式： 将需要穿透的样式定义在 styles.css 或 styles.scss 等全局样式文件中。
     • 禁用视图封装： 在组件的 @Component 装饰器中设置 encapsulation: ViewEncapsulation.None。但这会使组件的所有样式变为全局样式，可能导致样式冲突，应谨慎使用。
     • CSS 变量： 如果组件提供了 CSS 变量（如 --mat-tab-body-height），则可以通过设置这些变量来修改其内部样式。
     • 宿主上下文选择器（::ng-host）： 如果组件提供了通过宿主元素来影响内部样式的机制，可以利用 ::ng-host。
   • 对于本例，如果 left-wrapper 的样式位于一个父组件的样式文件中，可以考虑将 mat-tab-body-wrapper 和 mat-tab-body 的样式提取到全局样式文件，或者在父组件中禁用视图封装（如果影响范围可控）。

2. 高度计算的灵活性：

   • 在示例中，mat-tab-body-wrapper 和 mat-tab-body 的高度被硬编码为 37rem，与父容器 left-wrapper 的总高度相同。这假设 horizontal-tab-group 组件内的 mat-tab-header（标签页标题部分）要么不占用高度，要么其高度已经被 37rem 包含在内。
   • 更健壮的解决方案是考虑 mat-tab-header 的高度。如果 left-wrapper 的 37rem 是总高度，而 mat-tab-header 占据了一部分空间，那么 mat-tab-body 的高度应该通过计算得出，例如：

     .left-wrapper ::ng-deep .mat-tab-body-wrapper,
     .left-wrapper ::ng-deep .mat-tab-body.mat-tab-body-active {
         height: calc(100% - var(--mat-tab-header-height, 48px)); /* 假设 header 高度为 48px */
     }

     登录后复制

     或者，如果 left-wrapper 和 horizontal-tab-group 都使用 Flexbox 布局，可以利用 flex-grow: 1 让 mat-tab-body-wrapper 自动填充剩余空间。

3. 响应式设计：

   • 固定高度值如 37rem 可能不适用于所有屏幕尺寸和设备。在进行响应式设计时，应考虑使用百分比高度 (height: 100%;)、视口单位 (vh)，或结合媒体查询来调整高度，以确保在不同设备上都能提供良好的用户体验。

总结

解决 Angular Material mat-tab 内容区域高度不足的问题，关键在于理解 mat-tab 的内部结构，并利用 CSS 深度选择器（或其替代方案）精确控制 mat-tab-body-wrapper 和 mat-tab-body 元素的高度。通过将这些内部元素的高度设置为与父容器期望的高度一致，可以有效消除底部空白，使标签页内容完美填充可用空间。在实际开发中，应注意 ::ng-deep 的使用、高度计算的灵活性以及响应式设计原则，以构建更健壮、更易维护的 Angular 应用。

以上就是Angular mat-tab 高度自适应与内容区域填充教程的详细内容，更多请关注php中文网其它相关文章！