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

Posted 2023-03-05

【中文标题】离子 - 在另一个视图上刷新时不应用 CSS

【英文标题】：Ionic - CSS is not applied when refreshing on another view

【发布时间】：2015-06-22 06:24:26

【问题描述】：

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

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

https://imgur.com/YUCAO6i,oakGp8c#1

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

【问题讨论】：

会不会是你的数据丢失了（server.chartData.cpu）刷新时丢失了？

它将替换为从 API 接收到的新值。但是 server.chartData.cpu 仍然存在（正如您在底部的图片中看到的那样，图表仍然存在，只是太大了）。

【参考方案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> 元素，因此它根本不会尝试渲染。只有在您导航回视图并再次加载元素后，它才会尝试渲染和读取其父级的尺寸。 （这会起作用，因为所有样式都已应用）。

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

将高度和宽度硬编码为pie-chart.js 中的默认值 在 ionic 中禁用该视图的缓存或每次刷新时清除视图缓存。您可以致电$ionicHistory.clearCache()

【讨论】：

清除缓存也可以从带有属性 cache:false 的 uiRouter conf 获得

@aorfevre 我在哪里可以放 '$ionicHistory.clearCache()'

在这种情况下并不重要。我把它放在刷新函数的开头。

【参考方案2】：

强制我假设的样式：

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

【讨论】：

刷新后元素是否应用了样式？当您在包含图表的 div 上执行此操作时；你不能直接将 pieChart CSS 类直接应用到图表上吗？

将类直接应用于指令也不起作用，很可能与我在回答中解释的原因相同。