web-dev-qa-db-ja.com

各HTTPリクエストの読み込みGIFを表示Angular 4

私はAngularを初めて使用するので、httpリクエストが行われるたびにspinnerを表示する必要があります。

私には多くのコンポーネントがあります：

<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
<component-n></component-n>

それぞれにデータを取得または保存するhttpリクエストがあるため、httpリクエストが作成されたときに<loading></loading>コンポーネントを表示したいので、httpリクエストを使用して他のコンポーネントにロードコンポーネントを注入することはお勧めできません。 http要求を持つ各コンポーネントに<loading>コンポーネントを自動的にロードできるangularからフィルターまたは何かを追加できますか？

また、httpリクエストが完了したら、「Done」またはsometingなどのメッセージを表示します。

誰かが私にその解決策を提供できるなら、本当に感謝します、ty。

javascripthtmlangulartypescript
9
mcmwhfy

UPD： plunker を見てみましょう app.ts。すべてを1つのファイルに収めてすみません。

Angular 4.3では、インターセプターをサポートする新しいHttpClientModuleがあります。主なアイデアは次のようなものにすることです：

@Injectable()
export class LoadingIndicatorService {

    private _loading: boolean = false;

    get loading(): boolean {
        return this._loading;
    }

    onRequestStarted(): void {
        this._loading = true;
    }

    onRequestFinished(): void {
        this._loading = false;
    }
}

そして、クリストファーの答えのロジックをHttpInterceptorに適用するだけです。

知っておくべきことは、同時リクエストのみです。これは、たとえば、各リクエストに一意の識別子を生成し、リクエストが完了するまでどこかに保存することで解決できます。

次に、LoadingIndicatorを注入するグローバルLoadingIndicatorServiceコンポーネントを作成できます。

HttpClientModuleの詳細： https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

14
Vadim Khamzin

この2つのnpmパッケージを確認してください。

  1. ngx-progressbar 、これはリクエストごとに待機インジケータを自動的に表示できます（ 自動読み込みバーを参照してください ）、 router events または必要なときに。 demo を参照してください。

  2. ng-http-loader （Angular 4.3+のみ）、より伝統的な方法で同じ仕事をする SpinKit の派手なスピナーがあります。

6
Alex Klaus

Httpリクエストは、サブスクライブできるObservableを返します。

たとえば、ユーザーの認証を取得しましょう。

私のサービスで：

login(email: string, password: string): Observable<User> {
    let url = this.authUrl + '/login';

    return this.http
        .post(url, JSON.stringify({ email, password }))
        .map(res => res.json());
}

コンポーネントでこのメソッドを呼び出してサブスクライブします。

 this.isLoading = true;
 this.authService.login(email, password)
        .subscribe(data => {
            this.isLoading = false;
            // Do whatever you want once the user is logged in
            // Where 'data' is the User returned by our http request
         }, error => {
            // Handle errors here
         }

ユーザーのログインを試みる前にtrueに設定され、認証が成功するとfalseに設定されるブールisLoadingに注意してください。

これは、次のように、このブール値を使用してロードアニメーションを表示および非表示にできることを意味します。

<loading-component *ngIf="isLoading"></loading-component>
5
Christopher

angular 2+、再利用可能なユーティリティコンポーネントを作成する

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-progress-mask',
  templateUrl: './progress-mask.component.html',
  styleUrls: ['./progress-mask.component.css']
})
export class ProgressMaskComponent implements OnInit {
  @Input() showProgress:boolean = false;
  constructor() { }

  ngOnInit() {
  }

}

Html部分：

<div class="loadWrapper" *ngIf="showProgress">  
  <div class="loader"></div>  
</div>

cSSパーツ：

.loadWrapper {  
    background: rgba(0,0,0,0.3);  
    width: 100%;  
    height: 100%;  
    position: fixed;  
    top:0px;  
    left:0px;  
    z-index: 99999;  
}  
.loader {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3d3e3f; /* gray */
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

これをコンポーネントに挿入します

<app-progress-mask [showProgress]="showMask"></app-progress-mask>

コンポーネントのshowMaskを再利用可能なutilコンポーネントにバインドします

1
Sanjay Singh

あなたのcomponent.ts

public loading: boolean = false;

component.html内

<div *ngIf="!loading">
  <component-one></component-one>
  <component-two></component-two>
  <component-three></component-three>
  <component-n></component-n>
</div>

<loading *ngIf="loading"></loading>

読み込みアイコンを表示する必要があるときはいつでも、単にthis.loading = true;と非表示にするthis.loading = false;これにより、ロード中に表示したくないコンポーネントが非表示になり、代わりにロードアイコンが表示されます。

0
Wesley Coetzee