Question

我正在使用 Angular 6 。

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

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

我想用预加载器替换丑陋的白页，直到所有后台进程完成为止。

为此，我在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 strong>已加载。

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

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

以下是视频的工作原理：https://youtu.be/RSlTi0EQHm4

Answer 1

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

问题

问题不在于应用程序组件。加载应用程序组件后，微调框消失。由于Dashboard Component的原因，您看到的空白页很大，并且可能有多个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加载程序的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');
    loader.style.display = "none";
  }
}

Answer 3

组件

@Component({
  selector: 'app-root[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成功加载后，角度清除body [osk-root]元素的innerHtml

（请注意，我在Angular 9中使用了这种方式）

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

3 个答案:

问题

修复

仪表板组件