代码之家 › 专栏 › 技术社区 › davecar21

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

preloader angular-router angular

0

davecar21 · 技术社区 · 6 年前

我想创建一个预加载程序当 router-outlet 正在加载组件。

我想要的是先显示预加载程序,然后覆盖 路由器出口 然后在延迟(1s)后,预加载程序将隐藏并显示 路由器出口 .

预紧器的作用是隐藏 路由器出口 当它加载其内容(如图像)时,将显示预加载程序,并在延迟后 images/contents 已加载。

到目前为止我所做的就是 路由器出口 以及它的事件 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

如果有更好的解决方案?

1 回复 | 直到 6 年前

1

TheCrimsonSpace 6 年前

您可以使用一个将“display:hidden”应用于路由器出口的类,而preload值为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>