Ionic - CSS nie jest stosowany podczas odświeżania w innym widoku

Question

Obecnie pracuję nad moją pierwszą aplikacją Ionic i współpracuję z Angular po raz pierwszy.

Używam pie-chart library do wyświetlania wykresów na desce rozdzielczej aplikacji. Działa to dobrze, gdybym odświeżyć, a ja jestem na desce rozdzielczej i wygląda następująco:

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

Ale jeśli przejść do innej karty, powiedzmy kartę serwera i odświeżenia tam, szerokość i wysokość nie jest zastosowane do wykresów na desce rozdzielczej. Zamiast tego są renderowane przy użyciu standardowej szerokości i wysokości (500h x 900w zamiast 100h x 100w). (Zobacz drugie zdjęcie na imgur). Jeśli ponownie odświeżę pulpit nawigacyjny, będą renderować się normalnie.

Przeszedłem przez kod źródłowy biblioteki i zobaczyłem, że podczas odświeżania na desce rozdzielczej element [0] .parentElement.offsetWidth jest równy 100, ale jeśli odświeżam, gdy w innym widoku, jest 0, więc domyślne wartości są używane. Wygląda na to, że dyrektywa w postaci wykresu kołowego nie ma dostępu do elementu nadrzędnego w innym widoku.

Oto HTML i CSS używane:

HTML

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

CSS

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

starałem się znaleźć odpowiedź na wiele godzin, ale nie jestem jeszcze jestem pewien, czego dokładnie muszę szukać. Jedynym rozwiązaniem, które wymyśliłem, jest zmiana domyślnej wartości w pliku pie-chart.js, której nie powinienem robić.

EDIT

Aplikacja jest open source, można znaleźć pełny kod w moim repozytorium: https://github.com/AndreasGassmann/cloudatcostapp

Answer 1

Po wielu godzinach poszukiwań w końcu znalazłem przyczynę e problemu.

Istnieją 2 oddzielne zachowań powodujących problem:

• Ionic buforuje do 10 widoków w celu zwiększenia wydajności. Oznacza to, że po przełączeniu się z jednej karty na drugą, pierwsza pozostaje w DOM, dzięki czemu może być ładowana szybciej. Wydaje się jednak, że style CSS nie są stosowane do widoku, który nie jest widoczny. Oznacza to, że rzeczywista wysokość i szerokość elementu div z klasą .pieChart wynosi 0 w tym miejscu. Myślę, że jest to podobne do ustawiania właściwości elementu na display: none. (A blogpost explaining the issue with jquery)

• Po zaktualizowaniu wykresu kołowego zostanie ustawiony jego rozmiar na szerokość i wysokość elementu nadrzędnego. Sądzę, że jest to zrobione, więc wykres zmieni rozmiar po zmianie rozmiaru okna i odświeżeniu danych.

Te dwie rzeczy oczywiście nie pasują do siebie. Ponieważ Ionic buforuje widok deski rozdzielczej, element <pie-chart></pie-chart> nadal znajduje się w DOM, więc będzie próbował ponownie renderować natychmiast. Ale ponieważ style nie są stosowane do elementu div, to po prostu otrzymają szerokość i wysokość 0 i powrócą do domyślnych wartości.

W normalnych witrynach widoki zazwyczaj nie są buforowane. Oznacza to, że po odświeżeniu elementu <pie-chart></pie-chart> nie ma w DOM, więc nie będzie próbował renderować w ogóle. Dopiero po powrocie do widoku i załadowaniu elementu ponownie spróbuje wyświetlić i odczytać wymiary obiektu nadrzędnego. (Co zadziała, ponieważ wszystkie style są stosowane).

Nie znalazłem sposobu, w jaki można powiedzieć elementowi "pozostać renderowany", nawet jeśli nie jest to aktywny widok. Oznacza to, że są 2 opcje, aby rozwiązać ten problem (oprócz zmiany sposobu pracach bibliotecznych wykres kołowy):

• hardcode wysokość i szerokość jako wartość domyślną wewnątrz pie-chart.js
• wyłączenia buforowania dla tego widoku w jonowe lub wyczyść pamięć podręczną widoku przy każdym odświeżaniu. Możesz to zrobić, dzwoniąc pod numer: $ionicHistory.clearCache()

Answer 2

wymusić styl zakładam z:

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