Question

请看问题：

function newLayOutObj() {
    var config = {
        settings: {
            "hasHeaders": true,
            "constrainDragToContainer": false,
            "reorderEnabled": false,
            "selectionEnabled": false,
            "popoutWholeStack": false,
            "blockedPopoutsThrowError": false,
            "closePopoutsOnUnload": false,
            "showPopoutIcon": false,
            "showMaximiseIcon": true,
            "showCloseIcon": true,
            "responsiveMode": "onload"
        },
        content: [{
            type: 'column',
            content: [{
                    type: 'component',
                    "reorderEnabled": false,
                    "hasHeaders": false,
                    "isClosable": false,
                    "showPopoutIcon": false,
                    "showMaximiseIcon": false,
                    "showCloseIcon": false,
                    componentName: 'parrent',
                    componentState: {
                        text: 'Component 1',
                        id: "4587645"
                    }
                }


            ]
        }]
    };
    return config;
};
function add() {
    var newItemConfig = {
        type: 'component',
        componentName: 'parrent',
        width: 38.197,
    };
    layout.root.contentItems[0].addChild(newItemConfig);
};
layOutObj = new newLayOutObj();
layout = new GoldenLayout(layOutObj);
layout.container = "#golden";
layout.registerComponent('parrent', function (container, state) {
    container.getElement().html(`<h2 class="cname" >Component </h2>`);
});

layout.init();

$(function(){
$('#add').click(function(){ add(); })
})

body{ padding: 0px; background: #DDD; margin: 0px;}
.cname{ color:#FFF; text-align:center}

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />

<div id="ss" style="width: 800px; height:30px; margin:5px auto"> <button id="add"> Add </button> </div>   
<div id="golden" style="width: 800px; height:280px; margin:0px auto"> </div>

我可以点击添加按钮添加新行。一旦我关闭所有新添加的行，并再次使用添加按钮将模式更改为嵌套列，我希望将其作为行谢谢

 var newItemConfig = {
        type: 'component',
        componentName: 'parrent',
        width: 38.197,
    };
 layout.root.contentItems[0].addChild(newItemConfig);

我正在使用此方法添加新项目

Answer 1

https://github.com/deepstreamIO/golden-layout/blob/master/src/js/items/RowOrColumn.js#L134

之所以发生这种情况，是因为当儿童从ContentItem中移除而只留下一个孩子时，图书馆会清理这些事情。所以它的作用是嘿，我是唯一剩下的人，所以不再需要ContentItem。它在其父级上调用一个名为replaceChild的方法。这将获取唯一剩余的子节点，并使其成为其父节点的子节点，并删除ContentItem作为清除的一部分。

为什么一旦发生这种情况，它会继续向右添加？这是因为父是根，它总是一个堆栈。因此，当它替换它时，它会替换为堆栈。这可以通过在添加新项目之前添加以下日志语句来证明。

console.log(layout.root.contentItems[0].type)

这将证明一旦发生这种情况，它们就是堆栈而不是列的一部分。预期此行为是为了清理事务。

不期望的是这种行为有条件。如果最后一项isClosable = false则不会这样做。

您的配置为false。但是，如果在添加新日志之前添加以下日志语句：

console.log(layout.root.contentItems[0].config.isClosable)

当您期望它为true时，输出为false，从而满足替换它的条件。

所以这告诉我由于某种原因没有正确初始化。您可以看到没有关闭图标，但这只发生在初始化中。因此，在配置设置为true之后的某些时候。

Answer 2

在添加新组件之前检查组件是否已经存在

checkIfCOmponentExist(name: string): boolean {
   let compName = this.layout.root.getComponentsByName(name);
    if (compName && compName.length != 0)
       return true;
    else
       return false;

}

黄金布局，动态添加项目时出现问题

2 个答案: