Ionic

Question

我目前正在开发我的第一个 Ionic 应用程序，并且是第一次使用 Angular。

我正在使用 pie-chart library 在应用程序的仪表板上显示图表。如果我在仪表板上刷新时效果很好，看起来像这样：

但是如果我导航到另一个选项卡，比方说服务器选项卡，并在那里刷新，则宽度和高度不会应用于仪表板上的图表。相反，它们使用标准宽度和高度（500h x 900w 而不是 100h x 100w）呈现。（见 imgur 上的第二张图片）。如果我再次在仪表板上刷新，它们将正常呈现。

我查看了库的源代码，看到在dashboard上刷新时，element[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

强制使用我假定的样式：

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

Answer 2

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

有 2 个不同的行为导致了这个问题：

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

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

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

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

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