Question

我目前正在开发我的第一个Ionic App并首次与Angular合作。

我正在使用pie-chart library在应用的信息中心上显示图表。如果我在仪表板上刷新并且看起来像这样，那么这很有效：

但是，如果我导航到另一个选项卡，让我们说服务器选项卡，然后在那里刷新，则宽度和高度不会应用于仪表板上的图表。相反，它们使用标准宽度和高度（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

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

导致此问题的行为有两种：

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

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

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

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

Answer 2

强制我假设的风格：

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