جافا سكريبت - عرض صورة متحركة للتحميل لكل طلب HTTP في Angular 4

أنا جديد جدًا في Angular لذلك ما أحتاجه هو عرض spinner في كل مرة يتم فيها إجراء طلب HTTP.

لدي العديد من المكونات:

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

لكل واحد طلب HTTP يحصل على بعض البيانات أو يحفظها، لذلك عندما يتم تنفيذ طلب HTTP أريد عرض المكون <loading></loading> الخاص بي، لذا أفترض أنه ليس من الممارسات الجيدة حقن مكون التحميل في كل مكون آخر يحتوي على طلب HTTP. هل يمكنني إضافة فلتر أو شيء من Angular يسمح لي بتحميل مكون <loading> تلقائيًا في كل مكون يحتوي على طلب HTTP؟

أيضًا عندما يتم الانتهاء من طلب HTTP أريد عرض رسالة مثل "تم" أو شيء من هذا القبيل.

إذا كان بإمكان أي شخص أن يوفر لي حلاً لذلك فسأكون ممتنًا حقًا، شكرًا.

الإجابة رقم 1

تحديث: plunker. ألقِ نظرة على app.ts. عذرًا لوضع كل شيء في ملف واحد.

في 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

الإجابة رقم 2

ترجع طلب 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
         }

لاحظ المتغير البولياني isLoading الذي يتم ضبطه على true قبل محاولة تسجيل دخول المستخدم لدينا، وعلى false بمجرد أن تكون المصادقة ناجحة.

هذا يعني أنه يمكنك عرض وإخفاء الرسوم المتحركة للتحميل باستخدام هذا المتغير البولياني، مثل هذا:

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