Ionic - 在另一个视图上刷新时不应用CSS

Question

我目前正在开发我的第一个Ionic App,并且是第一次使用Angular.

我正在使用饼图库在应用程序的仪表板上显示图表.如果我在仪表板上刷新时这很好用,看起来像这样:

但是,如果我导航到另一个选项卡,让我们说服务器选项卡,然后在那里刷新,则宽度和高度不会应用于仪表板上的图表.相反,它们使用标准宽度和高度(500h x 900w而不是100h x 100w)进行渲染.(见imgur的第二张照片).如果我再次在仪表板上刷新,它们将正常渲染.

我浏览了库的源代码,发现当在仪表板上刷新时,元素[0] .parentElement.offsetWidth等于100,但是如果我在另一个视图上刷新时它是0,那么使用默认值.看起来像饼图指令在另一个视图上无法访问父级.

这是使用的HTML和CSS:

HTML

<div class="pieChart">
    <pie-chart data="server.chartData.cpu" options="chartOptions"></pie-chart>
</div>

CSS

.pieChart {
    height: 100px;
    width: 100px;
    float: left;
}

我试着找几个小时的答案,但我甚至不确定我究竟需要搜索什么.我想出的唯一解决方案是更改pie-chart.js中的默认值,我不想这样做.

编辑

该应用程序是开源的,您可以在我的存储库中找到完整的代码:https://github.com/AndreasGassmann/cloudatcostapp

Answer 1

经过几个小时的研究，我终于找到了问题的原因。

有 2 个单独的行为导致了该问题：

Ionic 缓存最多 10 个视图以提高性能。这意味着当您从一个选项卡切换到另一个选项卡时，第一个选项卡仍保留在 DOM 中，因此可以更快地加载它。但是，CSS 样式似乎不适用于不可见的视图。这意味着.pieChart此时该类的div的实际高度和宽度为0。我认为这类似于设置display: none元素的属性。（一篇解释 jquery 问题的博文）
每当饼图更新时，它都会将其大小设置为父元素的宽度和高度。我想这样做是为了在您调整窗口大小并刷新数据后图表会调整大小。

这两件事显然不能很好地结合在一起。由于 Ionic 缓存了仪表板视图，因此该<pie-chart></pie-chart>元素仍然在 DOM 中，因此它将尝试立即重新渲染。但由于样式未应用于父 div，因此它只会获取宽度和高度 0 并回退到使用默认值。

在普通网站中，视图通常不会被缓存。这意味着当您刷新时，该<pie-chart></pie-chart>元素不存在于 DOM 中，因此它根本不会尝试渲染。只有在您导航回视图并再次加载元素后，它才会尝试渲染并读取其父级的尺寸。（这会起作用，因为所有样式都被应用）。

我还没有找到一种方法来告诉元素“保持渲染”，即使它不是活动视图。这意味着有两个选项可以解决这个问题（除了改变饼图库的工作方式之外）：