すべてのHTTPリクエスト

良い一日のためにプログレスバーのローディング効果を作成し、どのように我々は、1分ごとにレンダリングされたすべてのAPIまたはHTTPリクエストの角度4におけるいくつかのローディング効果を達成することができますか？このhttps://github.com/pleerock/ngx-progress-barような何か？私はあなたを表示するために、任意のHTMLを使用することができる代わりに、プログレスバーロードテキストの角度4.すべてのHTTPリクエスト

出典

2017-11-27 Jydon Mah

を使用して独自のカスタムローディング効果を構築したいのindex.html

<body> 
    <div id="preloader" class="loader" style="display: none"> 
    <div class="d-flex align-items-center" style="height: 100%;"> 
     <div class="loader-content" title="0"> 
     Progress Bar Loading .... 
     </div> 
    </div> 


    </div> 
    <app-root class="">Loading...</app-root> 
</body>

のbodyタグの内側に次のHTMLを追加します。進行状況バーhtml style="display: none"

preloader divを次のように表示および非表示にするサービスを作成します。

import { Injectable } from '@angular/core'; 

@Injectable() 
export class PreloaderService { 

    static showPreLoader() { 
    document.getElementById('preloader').style.display = 'block'; 
    } 
    static hidePreLoader() { 
    document.getElementById('preloader').style.display = 'none'; 
    } 

}

あなたのコンポーネントの内部で次のようにそれを使用してください。

このサービスには2つの静的メソッドがあり、プリローダーの表示と非表示に使用します。これらのメソッドを使用するには、このサービスをコンストラクタパラメータとして指定する必要はありません。私はそれと作業罰金を使用してきた結果

隠す

PreloaderService.hidePreLoader();

出典

2017-11-27 02:17:17

を得た後だけでHTTPリクエスト

前

は

PreloaderService.showPreLoader();

を表示します。それはあなたのために働く場合は、私を投票してください;） –

これは私のためにうまく動作します。 heheh –

答えて

関連する問題