Ionic - Il CSS non viene applicato quando si aggiorna su un'altra vista

Question

Attualmente sto lavorando alla mia prima app Ionic e lavorando con Angular per la prima volta.

Sto utilizzando lo pie-chart library per visualizzare i grafici sul dashboard dell'app. Questo funziona bene se rinfresco mentre io sono sul cruscotto e si presenta così:

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

Ma se passare a un'altra scheda, diciamo la scheda Server, e aggiornare lì, la larghezza e l'altezza non è applicato ai grafici sulla dashboard. Invece sono renderizzati usando la larghezza e l'altezza standard (500h x 900w anziché 100h x 100w). (Vedi la seconda foto su imgur). Se aggiorno di nuovo sul cruscotto, verranno visualizzati normalmente.

Ho esaminato il codice sorgente della libreria e ho visto che durante l'aggiornamento sul dashboard, l'elemento [0] .parentElement.offsetWidth equivale a 100, ma se aggiorno quando su un'altra vista, è 0, quindi l'impostazione predefinita i valori sono usati Sembra che la direttiva del grafico a torta non possa accedere al genitore quando si trova su un'altra vista.

Ecco il codice HTML e CSS utilizzati:

HTML

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

CSS

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

ho cercato di trovare una risposta per ore, ma non sono nemmeno sicuro di cosa esattamente ho bisogno di cercare. L'unica soluzione che ho trovato è di cambiare il valore predefinito in pie-chart.js, che preferirei non fare.

EDIT

L'applicazione è open source, è possibile trovare il codice completo nel mio repository: https://github.com/AndreasGassmann/cloudatcostapp

Answer 1

Dopo ore di ricerche ho finalmente trovato la causa e del problema

Ci sono 2 comportamenti separati la causa del problema:

• ionico cache fino a 10 viste per aumentare le prestazioni. Ciò significa che quando passi da una scheda all'altra, la prima rimane nel DOM in modo che possa essere caricata più velocemente. Tuttavia, sembra che gli stili CSS non vengano applicati alla vista che non è visibile. Ciò significa che l'altezza e la larghezza effettive del div con la classe .pieChart sono 0 a questo punto. Penso che sia simile all'impostazione della proprietà display: none di un elemento. (A blogpost explaining the issue with jquery)

• Ogni qualvolta il grafico a torta viene aggiornato, imposta le sue dimensioni alla larghezza e all'altezza dell'elemento genitore. Immagino che questo sia fatto in modo che il grafico si ridimensiona dopo aver ridimensionato la finestra e aggiornare i dati.

Queste 2 cose ovviamente non vanno bene insieme. Poiché Ionic memorizza nella cache la vista dashboard, l'elemento <pie-chart></pie-chart> è ancora nel DOM, quindi proverà a eseguire nuovamente il rendering immediatamente. Ma poiché gli stili non sono applicati al div padre, otterranno solo la larghezza e l'altezza 0 e torneranno all'utilizzo dei valori predefiniti.

In normali siti Web, le visualizzazioni di solito non vengono memorizzate nella cache. Ciò significa che quando si aggiorna, l'elemento <pie-chart></pie-chart> non è presente nel DOM, quindi non tenterà di eseguire il rendering. Solo dopo aver riattivato la vista e caricato l'elemento, tenterà di eseguire il rendering e leggere le dimensioni del suo genitore. (Che funzionerà, dal momento che tutti gli stili sono applicati).

Non ho trovato un modo in cui puoi dire a un elemento di "rimanere reso", anche se non è la vista attiva. Ciò significa che ci sono 2 opzioni per risolvere questo (oltre cambiando il modo in cui funziona biblioteca diagramma a spicchi):

• hardcode altezza e larghezza come valore predefinito all'interno del pie-chart.js
• Disable caching per quella vista in ionico o cancella la vista cache ogni volta che aggiorni. È possibile farlo chiamando $ionicHistory.clearCache()

Answer 2

vigore le stile presumo con:

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