Question

我有一个获取父div宽度的函数，并计算子元素的总宽度。如果父宽度大于所有子元素的总宽度，它将应用css类。它适用于页面加载 - 但现在我正试图弄清楚如何在浏览器调整大小时执行此操作。

这是我在我的控制器中的功能......

public setCenterClass() {

    let parent =  document.querySelectorAll(".container")[0];
    let parentWidth = parent.clientWidth;
    let children = parent.children;
    let childrenWidth = 0;

    for (let i = 0; i < children.length; i++) {
        childrenWidth += children[i].offsetWidth;
    }

    if (parentWidth > childrenWidth) {
        return 'center-content';
    }

    return;
}

我从父div那样称呼它

<div class="container" ng-class="$ctrl.setCenterClass()" >...

它有效，但如果有更好的方法，那么请告诉我:)。

调整浏览器大小时调用setCenterClass（）的最佳方法是什么？我见过的所有例子似乎都使用指令。我正在使用Angular 1.5的组件和打字稿。感谢。

Answer 1

这不是你要求的，但我还是会这样说：我认为你应该使用 flexbox + 对齐内容代替。每次用户调整屏幕大小时调用一个函数都不好，并且在ng-class中调用函数的性能更差，因为每次模型更改时都会调用它。

使用flexbox，您可以这样做：

<div id="container">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
</div>

使用这个CSS：

#container{
  height:800px;
  width:1200px;
  overflow-x:scroll;

  display: -webkit-box;
  display:flex;
  justify-content:space-around;
}

.box{
  height:300px;
  flex:0 0 300px;
}

这样，如果子节点都适合父节点，它们将居中并间隔，但如果它们溢出父节点，它将变为可滚动。

这里是plunk

Answer 2

试试这个

 $(window).resize(function() {
        setTimeout(function() {
            resize();
        })
    })

使用jquery

浏览器调整大小时调用函数Angular 1.5（组件）

2 个答案: