Angular 2+应用程序预加载器，带有百分比指示符

Question

是否有人知道使用百分比指标实施Angular 2+预加载器的良好解决方案（类似于Gmail的加载屏幕）？

我知道通常的方法是在我们的<div>中添加<app-root>并设置样式，甚至可以添加CSS动画，一旦加载应用，它就会被应用内容替换。

但是......我实际看的是显示动画启动画面（SVG或其他任何内容），在动画完成后，加载栏应显示并显示进度状态。

在第一点，我正在考虑单独的splash组件，它将只是组件急切加载，并从那里加载所有其他模块，但如果我将该组件映射到＆＃39; /＆＃39;如何在任何其他路线上显示它作为第一个（起点）。此外，这意味着必须已加载Angular主包，因此这不是一个好的选择。

这个问题很可能过于宽泛，不适合Stack Overflow，但我找不到任何好的解决方案。 ：（

有没有办法加载没有Angular的纯JavaScript，它会加载Angular并显示进度？还是其他（更好的）想法？

这必须是可以实现的，因为整个Gmail都是Angular应用程序并且拥有它：D

Answer 1

你可以尝试ngx-progressbar，这真的很酷。 API不是一件容易的事，但有很好的文档记录，因此您可以构建任何复杂的进度条。

UPD 经过讨论，我建议采用以下方法（index.html）

1）在html级别提供进度条：

WorksheetNumber

2）加载您的应用包并通过Sub Demo2() Dim SourceWB As Workbook Dim SourceSheet As Worksheet Dim WorksheetNumber As Long On Error GoTo ErrorLog WorksheetNumber = 1 Set SourceSheet = SourceWB.Sheets(WorksheetNumber) '<-- throws an error If SourceWB Is Nothing Then MsgBox "SourceWB is not set" Exit Sub ElseIf SourceSheet Is Nothing Then MsgBox "We're looking for a sheet number higher than the total number of worksheets. For example, we're looking for sheet 3 when there are only 2 sheets in the workbook. Please check your mapping and re-try this workbook." Exit Sub Else 'We're good End If Exit Sub ErrorLog: Dim errorRow As Long With ThisWorkbook.Sheets("Error Log") errorRow = .Range("A" & .Rows.Count).End(xlUp).Row + 1 .Cells(errorRow, 1) = Err.Number .Cells(errorRow, 2) = Err.Description If SourceWB Is Nothing Then .Cells(errorRow, 3) = "Nothing" Else .Cells(errorRow, 3) = SourceWB.Name If SourceSheet Is Nothing Then .Cells(errorRow, 4) = "Nothing" Else .Cells(errorRow, 4) = SourceSheet.Name End If End If End With Resume Next End Sub

手动将其注入DOM

<my-app>
  <div style="width: 100%; background-color: grey;">
    <div id="myProgressBar" style="width: 1%; height: 30px; background-color: green;">
    </div>
  </div>
</my-app>

3）使用XMLHttpRequest观看进度并更新进度条参数

const tag = document.createElement('script');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'my-angular-app-bundle.js?' + new Date().getTime());
xhr.onloadend = (e) => document.head.appendChild(tag);
xhr.send(); 

要使XMLHttpRequest.onprogress更新更顺畅，您可以在const barElement = document.getElementById('myProgressBar'); xhr.onprogress = (e) => { if (e.lengthComputable) { const width = 100 * e.loaded / + e.total; barElement.style.width = width + '%'; } } 循环中增加进度条宽度：

onprogress

Answer 2

有时基于标签的加载效率更高，您可以使用PreloadJS库。您还可以使用onload事件来手动跟踪脚本加载的结束，并人为地插补进度，以使应用程序以恒定的速度加载。 Gmail可能根本不显示实际进度，它只是等待加载结束，使用计时器显示虚假的稳定进度。

Answer 3

我不认为加载指示器显示应用程序的加载。我认为它显示了应用程序加载后数据的加载。考虑一下邮件，联系人等数据……我认为gmail加载分为两个部分。

第1部分：在该应用本身启动时显示一个简单的动画（没有加载指示器）。

第2部分：现在，该应用程序已开始继续显示该加载动画。接下来，盘点您需要发出多少数据请求，并为此添加一个加载栏。

您可以使用this进行启动动画。

Answer 4

我已经在我的角度应用程序中使用了PACE来显示初始屏幕的进度条。 您也可以根据需要显示。您需要通过以下链接进行操作：

Automatic page load progress bar

希望它会对您有所帮助。

Answer 5

我想到的唯一方法是将您的应用程序连接到CLI并从命令行本身显示它显示的进度。

Answer 6

也许我的回答有点晚了，但是你可以查看这个教程，我认为它是非常现实和有用的实现：

Implementing Simble PRogress Bar Angular/Server side