web-dev-qa-db-ja.com

Angular 2+パーセントインジケーター付きのアプリケーションプリローダー

パーセンテージインジケーター付きのAngular 2+プリローダーを実装するための適切なソリューションを知っている人はいますか（Gmailのロード画面に似ています）。

通常の方法は、<div>を<app-root>内に追加してスタイルを設定し、CSSアニメーションを追加して、アプリが読み込まれるとアプリコンテンツに置き換えられることです。

しかし...私が実際に探しているのは、アニメーションが完了するとロードバーが表示され、進行状況が表示されるアニメーションスプラッシュスクリーン（SVGまたはその他）を表示することです。

enter image description here

最初は、熱心に読み込まれるコンポーネントのみであり、そこから他のすべてのモジュールを読み込む個別のスプラッシュコンポーネントについて考えていましたが、そのコンポーネントを '/'にマップすると、他のルートに最初に表示する方法（開始点）になります。また、これはAngularメインバンドルがすでにロードされている必要があるため、これは適切なオプションではありません。

ほとんどの場合、この質問は広すぎてスタックオーバーフローには適していませんが、これに対する適切な解決策はどこにもありません。 :(

Angularをロードして進行状況を表示するAngularなしのプレーンJavaScriptをロードする方法はありますか？または他の（より良い）アイデア？

Gmail全体がAngularアプリであり、彼らはそれを持っているので、これは達成可能でなければなりません：D

javascriptangularangular2-routingpreloader
9
Milos Miskone Sretin

あなたは 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）App Bundleを読み込み、XMLHttpRequestを介して手動で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);
}
7
dhilt

angularアプリでPACEを使用して、スプラッシュスクリーンの進行状況バーを表示しました。必要に応じて表示することもできます。以下のリンクを使用する必要があります。

自動ページ読み込み進行状況バー

それがあなたを助けることを願っています。

2
Shubham Verma

読み込みインジケータがアプリの読み込みを示しているとは思いません。アプリが読み込まれた後のデータの読み込みを示していると思います。メールや連絡先などのデータについて考えてみてください。Gmailの読み込みは2つの部分に分割されていると思います。

パート1：アプリ自体が起動している間、単純なアニメーション（インジケーターを読み込まない）を表示します。

パート2：これで、アプリはその読み込みアニメーションを表示し続けます。次に、作成する必要のあるデータ要求の数を調査し、そのための読み込みバーを追加します。

起動時のアニメーションには this を使用できます。

2
Robin Dijkhof

タグベースのロードの方が効率的な場合があります。PreloadJSライブラリを使用できます。また、onloadイベントを使用してスクリプトの読み込みの終わりを手動で追跡し、進捗状況を人為的に補間して、アプリが一定の速度で読み込まれているような印象を与えることもできます。 Gmailはおそらく実際の進行状況をまったく表示せず、タイマーを使用して偽の着実な進行状況を表示するロードの終了を待機するだけです。

2
kemsky

私が考える唯一の方法は、アプリをCLIに接続し、コマンドライン自体から表示される進行状況を表示することです。

0
KLTR