如何实现ngx-treeview高度随浏览器尺寸动态适配并自动滚动

核心思路 #

通过动态计算浏览器视口可用高度，实时赋值给TreeviewConfig的maxHeight属性，同时配合容器样式保证滚动逻辑生效。

具体实现步骤 #

• 第一步：在组件中引入窗口监听逻辑，动态计算可用高度
  在组件TS文件中加入监听窗口resize的逻辑，初始化时也执行一次高度计算。注意如果你的页面有顶部导航、面包屑等固定高度的元素，需要在计算时减去对应元素的高度值。

import { Component, HostListener } from '@angular/core';
import { TreeviewConfig } from 'ngx-treeview';

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  config: TreeviewConfig;
  // 动态高度变量
  dynamicMaxHeight: number = 0;

  constructor() {
    // 初始化时先计算一次高度
    this.calculateTreeHeight();
    // 初始化配置，绑定动态高度
    this.config = TreeviewConfig.create({
      hasAllCheckBox: false,
      hasFilter: true,
      hasCollapseExpand: false,
      decoupleChildFromParent: false,
      maxHeight: this.dynamicMaxHeight
    });
  }

  // 监听窗口大小变化，实时更新高度
  @HostListener('window:resize', ['$event'])
  onWindowResize() {
    this.calculateTreeHeight();
    // 更新配置的maxHeight
    this.config.maxHeight = this.dynamicMaxHeight;
  }

  // 计算树组件可用高度
  calculateTreeHeight() {
    // 视口总高度
    const windowHeight = window.innerHeight;
    // 减去页面其他固定元素的高度，例如顶部导航80px、页面边距20px，根据你的实际布局调整数值
    const offsetHeight = 100;
    this.dynamicMaxHeight = windowHeight - offsetHeight;
  }
}

• 第二步：补充容器样式，保证高度适配生效
  给组件的父容器和ngx-treeview组件本身添加样式，确保高度占满可用空间：

/* 全局样式需要保证html、body占满视口高度，可写在全局styles.css中 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 组件所在的父容器样式 */
.treeview-container {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

• 第三步：模板中绑定配置
  确保模板中ngx-treeview正确绑定了你的config对象：

<div class="treeview-container">
  <ngx-treeview [config]="config" [items]="yourTreeItems"></ngx-treeview>
</div>

问题原因说明 #

你之前遇到的两个问题本质都是maxHeight没有适配视口：

1. 固定maxHeight: 600时，小屏设备视口高度小于600px就会出现溢出
2. 不设置maxHeight时，ngx-treeview默认会使用内置的默认高度值，不会自动撑满父容器，所以只会占部分屏幕高度

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