Блог

Я пытаюсь загрузить несколько виджетов в Angular 6 и создал символ загрузки svg и, используя следующую логику, скрываю и показываю загрузочный div , пока не будут загружены все виджеты , В Firefox загружаемый svg отображается нормально, но в Chrome и IE появляется пустое окно, пока не будут загружены все виджеты, если я заменю svg текстом, даже он не появится в Chrome, вот код

app.component.html

  <div [hidden]="counter >= 3" class="loading-div"> 
       <img src="assets/icons/loading-bee.svg" type="image/svg xml"/>
       <span class="loading-bee-txt">Please wait while we retrieve the data.</span>
</div>
  <div>
    <wgt-financials (initialized)="counter = counter   1"></wgt-financials>
    <wgt-financials (initialized)="counter = counter   1"></wgt-financials>
    <wgt-financials (initialized)="counter = counter   1"></wgt-financials>
  </div>
<div>
  

Это отлично работает в Firefox, но не в Chrome или IE.

вам не нужно добавлять ‘type’ в тег img. Попробуйте удалить ‘type’.

 <img src="assets/icons/loading-bee.svg"/>
  

также вместо использования [hidden] вы можете использовать *ngIf

* ngIf vs [скрытый]

* ngIf эффективно удаляет свое содержимое из DOM, в то время как [hidden] изменяет свойство display и только указывает браузеру не показывать содержимое, но DOM все еще содержит его.

 <div *ngIf="counter !> 3 amp;amp; counter != 3" class="loading-div"> 
   <img src="assets/icons/loading-bee.svg"/>
   <span class="loading-bee-txt">Please wait while we retrieve the data. 
   </span>
</div>