如何根据内容设置Angular Material tab的内容高度

1. 修改HTML代码 #

关闭mat-tab-group的动态高度属性，同时给两个标签的内容容器添加区分类，修改后代码如下：

<div class="container">
    <mat-drawer-container class="example-container">
        <mat-drawer-content>
            <!-- 关闭dynamicHeight，固定内容区域高度 -->
            <mat-tab-group [dynamicHeight]="false">
                 <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="example-tab-icon" style="margin-right: 5px;">feed</mat-icon>
                        <span style="margin-right: 5px;">Tab-1</span>
                    </ng-template>
                    <!-- 给地图标签添加专属类 -->
                    <div class="tab-content map-tab">
                        <map></map>
                    </div>
                </mat-tab>
                <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="example-tab-icon" style="margin-right: 5px;">feed</mat-icon>
                        <span style="margin-right: 5px;">Tab-2</span>
                    </ng-template>
                    <!-- 给文本标签添加专属类 -->
                    <div class="tab-content text-tab">
                        <article></article>
                    </div>
                </mat-tab>
            </mat-tab-group>
        </mat-drawer-content>
    </mat-drawer-container>
</div>

2. 添加CSS样式 #

可以把以下样式加到组件样式文件或者全局样式文件中：

/* 确保根容器占满整个视口高度 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
/* 所有父级容器高度设为100% */
.container, .example-container, mat-drawer-content {
    height: 100%;
}
/* tab组用弹性布局，内容区域自动撑满剩余高度 */
mat-tab-group {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mat-tab-body-wrapper {
    flex: 1;
    overflow: hidden;
}
.mat-tab-body {
    height: 100%;
}
/* 地图标签样式：占满高度，无滚动条 */
.map-tab {
    height: 100%;
    overflow: hidden;
}
/* 地图本身也要自适应容器大小 */
map {
    width: 100%;
    height: 100%;
}
/* 文本标签样式：内容过长时自动出现纵向滚动条 */
.text-tab {
    height: 100%;
    overflow-y: auto;
}

如果是在组件样式文件中添加后不生效，是因为Angular样式封装的原因，给相关的Angular Material内置类选择器加上::ng-deep前缀即可，比如::ng-deep .mat-tab-body-wrapper。

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