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

我想在

路由器出口

加载组件时创建一个预加载程序

我想要的是，预加载程序将首先显示并覆盖

路由器出口

，然后在延迟（1s）后，预加载程序将隐藏并显示

路由器出口

预加载点是在加载其内容（如图像）时隐藏

路由器出口

，预加载程序将显示，延迟后加载

图像/内容

到目前为止，我所做的是使用

路由器出口

及其事件

激活

<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);
  }

装载机
预加载：布尔；
onActivate（事件：任何）{
this.preload=true；
console.log（this.preload）；
设置超时（（）=>{
此参数为0.preload=false；
},1000);
}

我的

---

如果有更好的解决方案？

您可以使用一个类，将“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>

…加载时要显示的内容。。。

不确定在路由器插座上添加条件是否是一种好做法。将显示/隐藏逻辑移到路由内容中，并在ts代码旁边使用[hidden]属性来监视要获取的内容。谢谢，我想我需要使用属性绑定，因为我将重用预加载程序，这样页面就不会重新加载预加载程序。