jquery - GoldenLayout，如何隐藏/显示组件？

Question

我有一个基于 GoldenLayout (1.5.9) 的应用程序。布局是包含两列的行。 请参阅下面我感兴趣的列的配置。

let config = {
    content: [
        {
            type: "row",
            content: [
                {
                    type: "column",
                    width: 31,
                    content: [
                        {
                            type: "stack",
                            isClosable: false,
                            content: [...]
                        },
                        {
                            type: "component",
                            height: 30,
                            title: "Filters",
                            componentName: "templateComponent"
                        }
                    ]
                },
                ...
            ]
        }
    ]
}

现在我希望能够关闭或隐藏组件并使其重新出现 按下工具栏按钮(即以编程方式)。我做了各种不成功的尝试:

1. 如果我使用 x 按钮关闭组件，父列 神奇地消失了，所以组件上的后续 addChild 父级(保存在某处)将组件添加为 Stack 的子级。 不是我想要的。

2. 如果我隐藏 component.element，组件就会消失，但是 孔仍然存在。也就是说，Stack 不会调整大小。

3. 我在任何地方都找不到记录在案的 hide() 方法 组件，即使我将它包装在行、列或堆栈中。

4. 如果我手动移动 Stack 和 组件方式下降我得到了我想要的(也就是说，给 堆叠几乎所有高度)但没有组合 setSize(?, ?) 似乎以编程方式执行相同的操作。

有什么想法吗？ 谢谢!

更新: 如果我将组件包装到另一个 Stack 中，容器 Column 不会消失，所以我可以将它添加回去:

{
    type: "stack",
    height: 30,
    id: "filtersFrame",
    isClosable: true,
    content: [
        {
            type: "component",
            title: "Filters",
            componentName: "templateComponent",
            componentState: { template: "filter-template" }
        }
    ]
}

只是忽略了高度(新堆栈的高度始终为 50%)并且存在淘汰模板但未通过淘汰运行。但这是另一个问题。

Answer 1

我遇到了同样的问题并找到了一个简单的解决方案:请注意，我使用的是 Angular5，所以这是在 typescript 中，但代码很容易翻译成 vanilla JS。

我发现如果你简单地调用显示/隐藏，updateSize 不会做任何事情，留下一个大的空洞，所以你也应该将大小设置为 0/[whatever]。

如果将size设置为0，调用updateSize()而不调用hide()，元素会变成细条。

为了获得完整效果，您必须同时执行这两项操作。

    let smartFormsRow = this._goldenLayout.root.getItemsById("smartformsrow");
    var isHidden = smartFormsRow[0].config.height == 0;
    if (isHidden) {
        smartFormsRow[0].element.show(); //jquery hide
        smartFormsRow[0].config.height = 30; //30%
    } else {
        smartFormsRow[0].element.hide(); //jquery show
        smartFormsRow[0].config.height = 0;
    }

    this._goldenLayout.updateSize();