Angular: Показать предварительный загрузчик, когда маршрутизатор активирован / изменен

Question

Я хочу создать предварительный загрузчик, когда router-outlet загружает компонент

Я хотел, чтобы прелоадер отображался первым и покрывал router-outlet и после задержки (1 с) предзагрузчик будет скрыт и покажет router-outlet,

Смысл preloader заключается в том, чтобы скрыть router-outlet пока он загружает свой контент, такой как изображения, будет показан предварительный загрузчик, и через некоторое время images/contents загружены.

Пока что я сделал, что с помощью router-outlet и его событие activate

<div *ngIf="preLoader" class="loader">
  <h2>LOADER</h2>
</div>
<router-outlet (activate)="onActivate($event)"></router-outlet>

preLoader: boolean;
  onActivate(event : any) {
    this.preLoader = true;
    console.log(this.preLoader);
    setTimeout(()=>{
      this.preLoader = false;
    },1000);
  }

Мой preloader stackblitz демо

Есть ли лучшее решение?

Answer 1

Вы можете использовать класс, который применяет "display: hidden" к выходу маршрутизатора, в то время как значение preloader равно true, что скрывает его на странице.

<div [class.hide-me]="!preLoader" class="loader">
  ...content to show whilst loading...
</div>
<router-outlet
  [class.hide-me]="preLoader"
  (activate)="onActivate($event)">
</router-outlet>