Angular يستخدم الخدمة لتنفيذ الخدمات المخصصة (الإخطار)

ذكرنا في المقال السابق أن

الخدمة لا يمكن استخدامها فقط لمعالجة طلبات واجهة برمجة التطبيقات (API)، بل لها أيضًا استخدامات أخرى

، مثل تنفيذ notification التي سنتحدث عنها في هذا المقال. [الدروس التعليمية ذات الصلة الموصى بها: "Angular Tutorial"]

العروض هي كما يلي:

يمكن تعديل واجهة المستخدم لاحقًا

، لذلك دعونا نقسمها خطوة بخطوة.

لإضافة خدمة،

نضيف ملف خدمة notification.service.ts في app/services (يرجى استخدام سطر الأوامر لإنشائه) ونضيف المحتوى ذي الصلة:

// notification.service.ts

استيراد {Injectable} من '@angular/core'؛
استيراد {موضوع يمكن ملاحظته} من 'rxjs'؛

// تعداد حالة الإخطار Export enum NotificationStatus {
  العملية = "التقدم"،
  النجاح = "النجاح"،
  الفشل = "الفشل"،
  انتهى = "انتهى"
}

@الحقن({
  المقدمة في: 'الجذر'
})
تصدير فئة NotificationService {

  إشعار خاص: Subject<NotificationStatus> = new Subject();
  رسالة عامةObj: أي = {
    أساسي: ''،
    ثانوي: ''
  }

  // تحويل إلى getNotification() العامة التي يمكن ملاحظتها: Observable<NotificationStatus> {
    إرجاع this.notify.asObservable();
  }

  // الإخطار قيد التقدم public showProcessNotification() {
    this.notify.next(NotificationStatus.Process)
  }

  // إشعار النجاح public showSuccessNotification() {
    this.notify.next(NotificationStatus.Success)
  }

  // إنهاء الإشعار public showEndedNotification() {
    this.notify.next(NotificationStatus.Ended)
  }

  // تغيير المعلومات publicchangePrimarySecondary(primary?: string, Secondary?: string) {
    this.messageObj.primary = Primary;
    this.messageObj. Secondary = ثانوي
  }

  منشئ () { }
}

هل من السهل أن نفهم...

نحول notify إلى كائن يمكن ملاحظته، ثم ننشر معلومات الحالة المختلفة.

لإنشاء مكون،

نقوم بإنشاء مكون notification جديد في app/components حيث يتم تخزين المكونات العامة. لذلك سوف تحصل على البنية التالية:

الإخطار                                          
├── notification.component.html // هيكل الصفحة ├── notification.component.scss // نمط الصفحة الفريد ├── notification.component.spec.ts // ملف الاختبار └── notification.component.ts // In في ملف جافا سكريبت،

نحدد الهيكل العظمي notification :

<!-- notification.component.html -->

<!--دعم الإغلاق اليدوي للإشعارات-->
<button (click)="CloseNotification()">إغلاق</button>
<h1>محتوى التذكير: {{ message }}</h1>
<!-- تخصيص معلومات الإشعارات الرئيسية-->
<p>{{ رسالة أساسية }}</p>
<!-- تخصيص معلومات الإشعارات الثانوية-->
<p>{{ SecondaryMessage }}</p>

بعد ذلك، نقوم ببساطة بتعديل الهيكل وإضافة النمط التالي:

// notification.component.scss

:يستضيف {
  الموقف: ثابت؛
  أعلى: -100%؛
  اليمين: 20 بكسل؛
  لون الخلفية: #999؛
  الحدود: 1 بكسل صلب #333؛
  نصف قطر الحدود: 10 بكسل؛
  العرض: 400 بكسل؛
  الارتفاع: 180 بكسل؛
  الحشو: 10 بكسل؛
  // انتبه إلى المحتوى النشط هنا، فهو يظهر فقط عند ظهور إشعار.
    أعلى: 10 بكسل؛
  }
  &.نجاح{}
  &.تقدم {}
  &.فشل {}
  &.انتهى {}
}

تتوافق أسماء الفئات الأربعة success, progress, failure, ended مع التعداد المحدد بواسطة خدمة الإشعارات. يمكنك إضافة الأنماط ذات الصلة وفقًا لتفضيلاتك الخاصة.

وأخيرًا، نضيف كود javascript السلوكي.

// notification.component.ts

استيراد { Component، OnInit، HostBinding، OnDestroy } من '@angular/core'؛
// نقطة معرفة جديدة rxjs
استيراد { الاشتراك } من 'rxjs'؛
استيراد {debounceTime} من 'rxjs/operators'؛
// تقديم الخدمات ذات الصلة import { NotificationStatus, NotificationService } from 'src/app/services/notification.service';

@عنصر({
  المحدد: "إشعار التطبيق"،
  templateUrl: './notification.component.html'،
  styleUrls: ['./notification.component.scss']
})
فئة التصدير NotificationComponent تنفذ OnInit، OnDestroy {
  
  // وقت مضاد للاهتزاز، للقراءة فقط خاص للقراءة فقط NOTIFICATION_DEBOUNCE_TIME_MS = 200؛
  
  إشعار محمي الاشتراك!: الاشتراك؛
  مؤقت خاص: Any = null;
  الرسالة العامة: سلسلة = ''
  
  // تعيين خدمة الإعلام لمعلومات التعداد Private ReflectObj: Any = {
    التقدم: "قيد التقدم"،
    النجاح: "النجاح"،
    فشل: "فشل"،
    انتهى : "نهاية"
  }

  @HostBinding('class') notificationCssClass = '';

  الرسالة الأولية العامة!: سلسلة؛
  رسالة ثانوية عامة!: سلسلة؛

  منشئ(
    خدمة الإشعارات الخاصة: خدمة الإشعارات
  ) { }

  ngOnInit (): باطل {
    هذا.init()
  }

  الحرف الأول العام () {
    // أضف معلومات الاشتراك ذات الصلة this.notificationSubscription = this.notificationService.getNotification()
      .ماسورة(
        debounceTime(this.NOTIFICATION_DEBOUNCE_TIME_MS)
      )
      .subscribe((حالة الإشعار: حالة الإشعار) => {
        إذا (حالة الإخطار) {
          this.resetTimeout();
          // أضف الأنماط ذات الصلة this.notificationCssClass = `active ${ notificationStatus }`
          this.message = this.reflectObj[notificationStatus]
          // احصل على رسالة أساسية مخصصة this.primaryMessage = this.notificationService.messageObj.primary;
          // احصل على معلومات ثانوية مخصصة this. SecondaryMessage = this.notificationService.messageObj. Secondary;
          إذا (notificationStatus === NotificationStatus.Process) {
            this.resetTimeout()
            this.timer = setTimeout(() => {
              هذا. إعادة تعيين العرض ()
            }، 1000)
          } آخر {
            this.resetTimeout();
            this.timer = setTimeout(() => {
              this.notificationCssClass = ''
              هذا. إعادة تعيين العرض ()
            }، 2000)
          }
        }
      })
  }

  إعادة تعيين خاصة () : باطلة {
    هذه الرسالة = ''
  }
  
  // أغلق الموقت الخاص إعادة تعيين الوقت (): باطلة {
    إذا (هذا. الموقت) {
      ClearTimeout(this.timer)
    }
  }

  // إغلاق الإشعار public CloseNotification() {
    this.notificationCssClass = ''
    this.resetTimeout()
  }
  
  // تم تدمير المكون ngOnDestroy(): void {
    this.resetTimeout();
    // إلغاء جميع رسائل الاشتراك this.notificationSubscription.unsubscribe()
  }

}

نقدم هنا نقطة المعرفة الخاصة بـ rxjs ، وهي مكتبة برمجة تفاعلية تستخدم Observables ، مما يسهل كتابة التعليمات البرمجية غير المتزامنة أو المستندة إلى رد الاتصال. هذه مكتبة رائعة، وسوف تتعلم المزيد عنها في المقالات القليلة القادمة.

هنا نستخدم وظيفة debounce anti-shake. تعني وظيفة anti-shake أنه بعد تشغيل حدث ما، لا يمكن تنفيذه إلا مرة واحدة بعد n ثانية، وإذا تم تشغيل الحدث مرة أخرى خلال n ثانية، فسيكون وقت تنفيذ الوظيفة إعادة الحساب. بكل بساطة: عندما يتم تشغيل إجراء ما بشكل مستمر، يتم تنفيذه في المرة الأخيرة فقط.

ملاحظة: وظيفة throttle : تقييد الوظيفة ليتم تنفيذها مرة واحدة فقط خلال فترة زمنية معينة .

أثناء المقابلة، يحب القائم بالمقابلة أن يسأل...

الاتصال

نظرًا لأن هذه خدمة عالمية، فإننا نسمي هذا المكون في app.component.html :

// app.component.html

<مخرج التوجيه></مخرج التوجيه>
<app-notification></app-notification>

لتسهيل العرض التوضيحي، أضفنا زرًا في user-list.component.html لتشغيل العرض التوضيحي بسهولة:

// user-list.component.html

<button (click)="showNotification()">انقر فوق إظهار الإشعار</button>

يؤدي إلى تشغيل الكود ذي الصلة:

// user-list.component.ts

استيراد { NotificationService } من 'src/app/services/notification.service'؛

// ...
منشئ(
  خدمة الإشعارات الخاصة: خدمة الإشعارات
) { }

//إظهار الإخطار showNotification(): void {
  this.notificationService.changePrimarySecondary('المعلومات الأولية 1');
  this.notificationService.showProcessNotification();
  setTimeout(() => {
    this.notificationService.changePrimarySecondary('المعلومات الأولية 2', 'المعلومات الثانوية 2');
    this.notificationService.showSuccessNotification();
  }، 1000)
}

عند هذه النقطة، انتهينا، لقد نجحنا في محاكاة وظيفة notification . يمكننا تعديل مكونات الخدمة ذات الصلة وفقًا للاحتياجات الفعلية وتخصيصها لتلبية احتياجات العمل. إذا كنا نقوم بتطوير نظام للاستخدام الداخلي، فمن المستحسن استخدام مكتبات واجهة المستخدم الناضجة، فقد ساعدتنا في تغليف المكونات والخدمات المختلفة، مما يوفر لنا الكثير من وقت التطوير.