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

您可以使用在预加载器值为true的情况下将“ display：hidden”应用于路由器出口的类，这样会将其隐藏在页面中。

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

角度：路由器激活/更改时显示预加载器

1 个答案: