Angular中如何实现可拖拽调整的垂直拆分面板？

问题描述 #

我需要在Angular项目中实现垂直拆分面板：两个面板由拆分器分隔，拖拽拆分器可调整面板大小——向上拖拽时下方面板变大，向下拖拽时上方面板变大。尝试使用PrimeNG的Splitter组件实现，但出现类型错误，相关代码及报错如下：

组件TS代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-resizable',
  templateUrl: './resizable.component.html',
  styleUrls: ['./resizable.component.css']
})
export class ResizableComponent {}

模板HTML代码 #

<p-splitter 
    [style]="{ height: '300px' }"
    layout="vertical">
        <ng-template pTemplate>
            <div class="col flex align-items-center justify-content-center">
                Panel 1
            </div>
        </ng-template>
        <ng-template pTemplate>
            <div class="col flex align-items-center justify-content-center">
                Panel 2
            </div>
        </ng-template>
</p-splitter>

样式CSS代码 #

.card {
    background: var(--surface-card);
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

报错信息（翻译后） #

错误: node_modules/primeng/splitter/splitter.d.ts:156:75 - 错误 TS2344: 类型 '{ styleClass: { alias: "styleClass"; required: false; }; panelStyleClass: { alias: "panelStyleClass"; required: false; }; style: { alias: "style"; required: false; }; panelStyle: { alias: "panelStyle"; required: false; }; ... 6 more ...; panelSizes: { ...; }; }' 不满足约束 '{ [key: string]: string; }'。属性 "styleClass" 与索引签名不兼容。类型 '{ alias: "styleClass"; required: false; }' 无法赋值给类型 'string'。

解决方案 #

1. 版本兼容性检查 #

这个类型错误几乎都是PrimeNG与Angular版本不匹配导致的类型定义冲突。请确保两者版本对应：

• Angular 16+ → PrimeNG 16+
• Angular 15 → PrimeNG 15
• Angular 14 → PrimeNG 14

执行命令查看当前版本：

npm list @angular/core primeng

根据结果升级或降级PrimeNG：

# 升级到最新兼容版本
npm install primeng@latest
# 或指定对应版本，例如Angular 16对应PrimeNG 16.0.0
npm install primeng@16.0.0

2. 修正Splitter模板使用 #

PrimeNG的Splitter组件要求每个面板的pTemplate必须指定索引值（0、1、...），修正后的HTML代码：

<p-splitter 
    [style]="{ height: '300px' }"
    layout="vertical">
        <ng-template pTemplate="0">
            <div class="col flex align-items-center justify-content-center">
                Panel 1
            </div>
        </ng-template>
        <ng-template pTemplate="1">
            <div class="col flex align-items-center justify-content-center">
                Panel 2
            </div>
        </ng-template>
</p-splitter>

3. 清理缓存并重建项目 #

缓存可能导致类型定义异常，执行以下命令清理后重新构建：

rm -rf node_modules package-lock.json
npm install
ng build --clean

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