javascript - 带有百分比指示器的 Angular 2+ 应用程序预加载器

Question

有人知道用百分比指示器(类似于 Gmail 的加载屏幕)实现 Angular 2+ 预加载器的好的解决方案吗？

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

但是...我实际上正在寻找的是显示动画启动画面(SVG 或其他任何东西)，动画完成后应该出现加载栏并显示进度状态。

一开始我在考虑单独的 splash 组件，它将只是组件急切加载并从那里加载所有其他模块但是如果我将该组件映射到 '/' 如何首先在任何其他路由上显示它(开始观点 )。此外，这意味着 Angular 主包必须已经加载，所以这不是一个好的选择。

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

有没有一种方法可以在没有 Angular 的情况下加载纯 JavaScript 来加载 Angular 并显示进度？或者任何其他(更好)的想法？

这一定是可以实现的，因为整个 Gmail 都是 Angular 应用程序，而且他们拥有它 :D

Answer 1

你可以试试ngx-progressbar ，真的很酷。 API 并不简单，但有据可查，因此您可以构建任何复杂程度的进度条。

---

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

1) 在html层面提供进度条:

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

2) 加载您的应用程序包并通过 XMLHttpRequest 手动将其注入(inject) DOM

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

3) 使用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 更新更流畅，您可以在 setInterval 循环中增加进度条宽度:

if (e.lengthComputable) {
  const endWidth = 100 * e.loaded / + e.total;
  const intervalId = setInterval(() => {
    const width = parseInt(barElement.style.width, 10);
    if (width >= endWidth) {
      clearInterval(intervalId);
    } else {
      width += 2; 
      barElement.style.width = width + '%'; 
    }
  }, 40);
}