无法在页面加载期间创建进度条答案

【问题标题】：unable to create a progress bar to during page loading无法在页面加载期间创建进度条
【发布时间】：2018-05-25 05:39:26
【问题描述】：

灵感来自 SO 答案 - Show loading screen when navigating between routes in Angular 2，我想在我的 Angular 应用程序的主页上传之前显示一个进度条。但它不起作用。

我创建了一个带有选择器app-progress-bar' 的进度组件。它的 HTML 是

progress.component.html

<div class="loading-overlay" >
  <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

我的应用程序组件使用 css-grid 具有 3 行和 1 列。 HTML是

app.component.html

<div class="body__div--background"  >
  <div class="css-grid-container"  *ngIf="loading">
    <app-progress-bar></app-progress-bar>
  </div>
  <div class="css-grid-container" *ngIf="!loading">
    <app-nav-component></app-nav-component>
    <!-- the components which target this router-outlet could be containers. Don't make this content-component a container-->
    <app-content-component></app-content-component>

    <!--app-content-component></app-content-component> <!--this component has router-outlet to put new componnents in it -->
    <app-footer-component></app-footer-component>
  </div>

</div>

定位上述布局的css是

app.component.css

.body__div--background {
  background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color:#555555;
  font-family: Helvetica;
  line-height:1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}

.css-grid-container{
  height:100vh; /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

app-nav-component {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

app-content-component{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

app-footer-component{
  grid-column: 1 / -1;
  grid-row: 3 / -1;
}

app-progress-bar{
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.ts 文件是

app.component.ts

import { Component } from '@angular/core';
import * as moment from "moment";
import {MatProgressBarModule} from '@angular/material/progress-bar';

import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  // Sets initial value to true to show loading spinner on first load
  loading = true

  constructor(private router: Router) {
    router.events.subscribe((event: RouterEvent) => {
      this.navigationInterceptor(event)
    })
  }

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    console.log("received event from Router:",event)
    if (event instanceof NavigationStart) {
      console.log("NavigationStart")
      console.log("old load"+this.loading)
      this.loading = true
      console.log("new load"+this.loading)
    }
    if (event instanceof NavigationEnd) {
      console.log("NavigationEnd")
      console.log("old load"+this.loading)
      this.loading = false
      console.log("new load"+this.loading)
    }

    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      console.log("NavigationCancel")
      console.log("old load"+this.loading)
      this.loading = false
      console.log("new load"+this.loading)
    }
    if (event instanceof NavigationError) {
      console.log("NavigationError")
      console.log("old load"+this.loading)
      this.loading = false
      console.log("new load"+this.loading)
    }
  }

}

我在main.html使用上面的组件

<app-root>Loading ...</app-root>

我看到的只是消息Loading ...，然后我的页面加载了，但我没有看到进度条。我如何在 Angular 加载应用程序时显示进度条或微调器？

【问题讨论】：

标签： angular6

【解决方案1】：

您可以使用以下代码作为参考，但根据您的要求更改移动功能：

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
</script>

</body>
</html>

【讨论】：

谢谢。我想我试图实现的目标是不可能的。我想在角度加载时显示进度条，但显示进度条的逻辑本身就是角度的。所以我永远看不到进度条。我刚读了这篇文章。显示进度条的逻辑必须在 index.html 中，它承载主要的 Angular 组件，而不是 Angular 本身 - medium.com/@tomastrajan/…