求助：Angular+PrimeNG中Splitter子组件自动高度适配问题

我使用 Angular 和 PrimeNG 构建 UI 界面，嵌入了 Monaco Editor 及其他 PrimeNG 组件，目前无法实现子组件的自动高度调整，需要达成以下两个效果：

• 右侧拆分面板宽高变化时，嵌入的 Monaco Editor 自动填充 100% 宽高；
• 切换左下方面板标签至 Chart 时，图表组件填满 100% 空间且不改变页面整体高度（当前会纵向拉伸出现垂直滚动条）。

解决方案 #

1. Monaco Editor 自适应宽高处理 #

Monaco Editor 不会主动监听容器尺寸变化，需手动绑定尺寸监听并触发重排：

• 给编辑器容器设置占满父容器的样式：

:host {
  display: block;
  width: 100%;
  height: 100%;
}
.editor-container {
  width: 100%;
  height: 100%;
  position: relative;
}

• 在组件中使用 ResizeObserver 监听容器尺寸，变化时调用编辑器的 layout() 方法：

import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import * as monaco from 'monaco-editor';

@Component({
  selector: 'app-monaco-wrapper',
  template: '<div #editorContainer class="editor-container"></div>',
  styles: [/* 上述样式 */]
})
export class MonacoWrapperComponent implements OnInit, OnDestroy {
  @ViewChild('editorContainer') editorContainer!: ElementRef;
  private editor: monaco.editor.IStandaloneCodeEditor | undefined;
  private resizeObserver: ResizeObserver | undefined;

  ngOnInit(): void {
    this.editor = monaco.editor.create(this.editorContainer.nativeElement, {
      value: '// 编辑区域',
      language: 'typescript'
    });

    // 监听容器尺寸变化
    this.resizeObserver = new ResizeObserver(() => {
      this.editor?.layout();
    });
    this.resizeObserver.observe(this.editorContainer.nativeElement);
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
    this.editor?.dispose();
  }
}

2. Chart 组件避免页面拉伸 #

通过约束父容器高度并在标签切换时重绘图表解决：

• 给 TabView 及图表容器设置高度约束，避免溢出：

:host {
  display: block;
  height: 100%;
}
.p-tabview {
  height: 100%;
}
.p-tabview-panels {
  height: calc(100% - 48px); /* 减去Tab栏的默认高度 */
  overflow: hidden;
}
.chart-container {
  width: 100%;
  height: 100%;
}

• 切换标签时触发图表重绘，确保尺寸适配：

import { Component, ViewChild } from '@angular/core';
import { TabView } from 'primeng/tabview';
import { Chart } from 'primeng/chart';

@Component({
  selector: 'app-left-panel',
  template: `
    <p-tabView (onChange)="handleTabChange($event)">
      <p-tabPanel header="Chart">
        <div class="chart-container">
          <p-chart #chart type="line" [data]="chartData"></p-chart>
        </div>
      </p-tabPanel>
      <!-- 其他标签页 -->
    </p-tabView>
  `,
  styles: [/* 上述样式 */]
})
export class LeftPanelComponent {
  @ViewChild('chart') chart!: Chart;
  chartData = {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ data: [65, 59, 80] }]
  };

  handleTabChange(event: any): void {
    // 切换到Chart标签时延迟重绘，确保容器尺寸已更新
    if (event.header === 'Chart') {
      setTimeout(() => this.chart.refresh(), 0);
    }
  }
}

通用布局注意事项 #

• 所有嵌套容器避免设置固定像素高度，优先使用百分比或 calc() 基于父容器分配空间；
• 使用 PrimeNG Splitter 时，给每个面板设置 flex: 1 或指定 size 属性，确保面板能随父容器拉伸。

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