Angular: 当路由器为 activated/change 时显示预加载器

Question

我想在 router-outlet 加载组件时创建一个预加载器。

我想要的是预加载器将首先显示并覆盖 router-outlet 然后在延迟（1s）后预加载器将被隐藏并显示 router-outlet.

预加载器的要点是在加载其内容时隐藏 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 demo

有没有更好的解决办法？

Answer 1

您可以使用 class 将 "display: hidden" 应用到路由器出口，同时预加载器值为 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>

Angular: 当路由器为 activated/change 时显示预加载器

Angular: Show preloader when Router is activated/change

preloader

angular

angular-router