在加载第一个组件之前在 Angular 中显示预加载器

Question

我正在使用 Angular 6。

我的应用程序在加载组件之前需要几秒钟的时间，而这段时间用于加载资源和验证用户。

当这一切发生时，我的应用程序显示一个空白页。

我想用 preloader 替换那个丑陋的白色页面，该页面将在所有后台进程完成之前一直显示。

为此，我在 index.html 之内添加了一个 CSS 加载微调器

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="/">

  <!-- Fonts and icons -->

</head>
<body>
  <app-root>
    <!-- Pre-loading spinner -->
    <!-- This code within the app-root will be wiped of once the child component is loaded -->
    <!-- This code will not even be shown in the source code once the child component is loaded -->
    <!-- We can put any code css/html/image/etc here -->

    <style>
      /** CSS here. Since it will be wiped totally, 'll not cause any impact to the core stylesheet.
    </style>

    Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
  </app-root>
</body>
</html>

这会显示一个类似的页面

但问题是这样的。第一个加载的组件是 app.component.html，它有以下内容

<router-outlet></router-outlet>

这进一步加载了另一个组件 admin-layout-component.html 的内容

<div class="wrapper">
  <div class="sidebar" data-color="red">
    <app-sidebar></app-sidebar>
  </div>
  <div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </div>
</div>

一旦 app.component 被加载，来自 index.html 的微调器内容就会被移除并开始显示空白页面，直到 admin-layout 已加载。

我尝试在 app.component.html 的 router-outlet 中添加相同的样式代码，但是当组件加载时，内容与微调器一起添加并且微调器不会从其他页面中删除。

在加载仪表板页面之前，如何在 app.component.html 上显示微调器。

这是一个如何工作的视频：https://youtu.be/RSlTi0EQHm4

Answer 1

首先，您的实现是显示加载微调器的非常标准的方式。

问题

问题不在于应用程序组件。加载应用程序组件后微调器消失。您看到的空白页面是因为仪表板组件的大小很大，并且可能有多个 API 调用。所以基本上微调器按预期工作。问题在于仪表板组件

修复

1.如果要修复，则需要在仪表板组件中隐藏句柄微调器。 创建 a 并将您的微调器内容放入其中，而不是 <app-root>

<body>
  <div id="loader">
     <!-- Pre-loading spinner -->
    <!-- This code within the app-root will be wiped of once the child component is loaded -->
    <!-- This code will not even be shown in the source code once the child component is loaded -->
    <!-- We can put any code css/html/image/etc here -->

    <style>
      /** CSS here. Since it will be wiped totally, 'll not cause any impact to the core stylesheet.
    </style>

    Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
  </div>

  <app-root></app-root>
</body>

仪表板组件

在ngAfterViewInit中隐藏id为loader的div

@Component({selector: 'dashbaord', template: `...`})
class DashboardComponent implements AfterViewInit {
  constructor(private elRef:ElementRef) {}

   ngAfterViewInit() {
     let loader = this.elRef.nativeElement.querySelector('#loader'); 
     loader.style.display = "none"; //hide loader
  }
}

Answer 2

根据 Sunil 的回答，我在 Angular 8 中得到了这个工作。我从 App 组件中隐藏了 loader 元素，该组件在任何其他组件之前初始化。所以不需要到处添加这个。

不推荐使用ElementRef 操作DOM，所以我改用Renderer2。

index.html:

<body class="theme-primary">
  <div id="loader">
    <style>
      .application-loading-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .application-loading-box {
        width: 300px;
        margin: 5px;
        text-align: center;
      }
    </style>
    <div class="application-loading-container">
      <div class="application-loading-box"><h2>Loading...</h2></div>
    </div>
  </div>
  <app-root></app-root>
</body>

app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements AfterViewInit {
  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    let loader = this.renderer.selectRootElement('#loader');
    this.renderer.setStyle(loader, 'display', 'none');
  }
}

Answer 3

组件

@Component({
  selector: 'body[osk-root]',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent{/* Not need remove element or change style*/}

index.html

<body osk-root><!--YOUR LOADER--></body>

appcomponent成功加载后，angular清除body[osk-root]元素的innerHtml

（注意我在 Angular 9 中像这样使用）