Angular menggunakan layanan untuk mengimplementasikan layanan khusus (pemberitahuan)

Pada artikel sebelumnya, kami telah menyebutkan bahwa

layanan tidak hanya dapat digunakan untuk memproses permintaan API, tetapi juga memiliki kegunaan lain

, seperti implementasi notification yang akan kita bahas di artikel ini. [Tutorial terkait yang direkomendasikan: "Tutorial Sudut"]

Renderingnya adalah sebagai berikut:

UI-nya nanti bisa disesuaikan

, jadi mari kita uraikan langkah demi langkah.

Untuk menambahkan layanan,

kami menambahkan file layanan notification.service.ts di app/services (silakan gunakan baris perintah untuk membuatnya) dan menambahkan konten terkait:

// notifikasi.service.ts

import { Suntikan } dari '@angular/core';
import {Dapat Diamati, Subjek } dari 'rxjs';

// Pencacahan status notifikasi ekspor enum NotifikasiStatus {
  Proses = "kemajuan",
  Sukses = "sukses",
  Kegagalan = "kegagalan",
  Berakhir = "berakhir"
}

@Dapat disuntik({
  disediakan di: 'root'
})
kelas ekspor Layanan Pemberitahuan {

  pemberitahuan pribadi: Subjek<NotificationStatus> = Subjek baru();
  pesan publikObj: apa pun = {
    utama: '',
    sekunder: ''
  }

  // Konversi ke getNotification publik yang dapat diamati(): Observable<NotificationStatus> {
    kembalikan this.notify.asObservable();
  }

  // Pemberitahuan sedang berlangsung public showProcessNotification() {
    this.notify.next(NotificationStatus.Proses)
  }

  // Pemberitahuan sukses publik showSuccessNotification() {
    this.notify.next(NotificationStatus.Sukses)
  }

  //Akhiri pemberitahuan publik showEndedNotification() {
    this.notify.next(NotificationStatus.Ended)
  }

  // Ubah informasi public changePrimarySecondary(primer?: string, sekunder?: string) {
    this.messageObj.primary = utama;
    this.messageObj.secondary = sekunder
  }

  konstruktor() {} }
}

Apakah mudah dimengerti...

Kami mengubah notify menjadi objek yang dapat diamati, dan kemudian mempublikasikan berbagai informasi status.

Untuk membuat komponen,

kita membuat komponen notification baru di app/components tempat komponen publik disimpan. Jadi Anda akan mendapatkan struktur berikut:

notifikasi                                          
├── notifikasi.component.html // Kerangka halaman ├── notifikasi.component.scss // Gaya unik halaman ├── notifikasi.component.spec.ts // File pengujian └── notifikasi.component.ts // Masuk file javascript

yang kita definisikan kerangka notification :

<!-- notifikasi.component.html -->

<!--Mendukung penutupan notifikasi secara manual-->
<button (klik)="closeNotification()">Tutup</button>
<h1>Isi pengingat: {{ pesan }}</h1>
<!-- Sesuaikan informasi pemberitahuan utama-->
<p>{{ Pesan utama }}</p>
<!-- Sesuaikan informasi notifikasi sekunder-->
<p>{{ secondMessage }}</p>

Selanjutnya, kita cukup memodifikasi kerangka dan menambahkan gaya berikut:

// notifikasi.component.scss

:tuan rumah {
  posisi: tetap;
  atas: -100%;
  kanan: 20 piksel;
  warna latar belakang: #999;
  batas: 1 piksel padat #333;
  radius batas: 10px;
  lebar: 400 piksel;
  tinggi: 180 piksel;
  bantalan: 10 piksel;
  // Perhatikan isi active disini hanya muncul ketika ada notifikasi &.active {.
    atas: 10 piksel;
  }
  &.kesuksesan{}
  &.kemajuan {}
  &.kegagalan {}
  &.berakhir {}
}

Empat nama kelas success, progress, failure, ended sesuai dengan enumerasi yang ditentukan oleh layanan notifikasi. Anda dapat menambahkan gaya terkait sesuai dengan preferensi Anda sendiri.

Terakhir, kami menambahkan kode javascript perilaku.

// notifikasi.component.ts

impor { Komponen, OnInit, HostBinding, OnDestroy } dari '@angular/core';
//Poin pengetahuan baru rxjs
impor { Berlangganan } dari 'rxjs';
impor {debounceTime} dari 'rxjs/operator';
//Memperkenalkan layanan terkait import { NotifikasiStatus, NotifikasiLayanan } dari 'src/app/services/notification.service';

@Komponen({
  pemilih: 'pemberitahuan aplikasi',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
kelas ekspor NotifikasiComponent mengimplementasikan OnInit, OnDestroy {
  
  // Waktu anti-guncangan, read-only private readonly NOTIFICATION_DEBOUNCE_TIME_MS = 200;
  
  pemberitahuan dilindungiBerlangganan!: Berlangganan;
  pengatur waktu pribadi: apa pun = null;
  pesan publik: string = ''
  
  // pemetaan layanan notifikasi informasi enumerasi private ReflectObj: any = {
    kemajuan: "sedang berlangsung",
    sukses: "sukses",
    kegagalan: "kegagalan",
    berakhir: "akhir"
  }

  @HostBinding('kelas') notifikasiCssClass = '';

  Pesan utama publik!: string;
  pesan sekunder publik!: string;

  konstruktor(
    Layanan pemberitahuan pribadi: Layanan Pemberitahuan
  ) {}

  ngOnInit(): batal {
    ini.init()
  }

  init publik() {
    //Tambahkan informasi langganan yang relevan this.notificationSubscription = this.notificationService.getNotification()
      .pipa(
        debounceTime(ini.NOTIFICATION_DEBOUNCE_TIME_MS)
      )
      .subscribe((notificationStatus: NotifikasiStatus) => {
        jika(status pemberitahuan) {
          ini.resetTimeout();
          //Tambahkan gaya terkait this.notificationCssClass = `aktif ${ notifikasiStatus }`
          ini.pesan = ini.reflectObj[notificationStatus]
          // Dapatkan pesan utama khusus this.primaryMessage = this.notificationService.messageObj.primary;
          // Dapatkan informasi sekunder khusus this.secondaryMessage = this.notificationService.messageObj.secondary;
          if(notificationStatus === NotifikasiStatus.Proses) {
            ini.resetTimeout()
            this.timer = setTimeout(() => {
              ini.resetView()
            }, 1000)
          } kalau tidak {
            ini.resetTimeout();
            this.timer = setTimeout(() => {
              ini.notifikasiCssClass = ''
              ini.resetView()
            }, 2000)
          }
        }
      })
  }

  resetView pribadi(): batal {
    ini.pesan = ''
  }
  
  // Tutup pengatur waktu private resetTimeout(): void {
    if(timer ini) {
      clearTimeout(ini.timer)
    }
  }

  // Tutup pemberitahuan public closeNotification() {
    ini.notifikasiCssClass = ''
    ini.resetTimeout()
  }
  
  // Komponen dimusnahkan ngOnDestroy(): void {
    ini.resetTimeout();
    //Batalkan semua pesan langganan this.notificationSubscription.unsubscribe()
  }

}

Di sini, kami memperkenalkan poin pengetahuan rxjs . RxJS adalah pustaka pemrograman reaktif yang menggunakan Observables , yang memudahkan penulisan kode asinkron atau berbasis panggilan balik. Ini adalah perpustakaan yang bagus, dan Anda akan mempelajarinya lebih lanjut di beberapa artikel berikutnya.

Di sini kita menggunakan fungsi anti-guncangan debounce . Fungsi anti-guncangan berarti bahwa setelah suatu peristiwa dipicu, peristiwa tersebut hanya dapat dijalankan satu kali setelah n detik dihitung ulang. Sederhananya: ketika suatu tindakan dipicu secara terus-menerus, hanya kali terakhir yang dieksekusi.

ps: fungsi pembatasan throttle : membatasi suatu fungsi untuk dijalankan hanya sekali dalam jangka waktu tertentu .

Saat wawancara, pewawancara suka bertanya...

Memanggil

Karena ini adalah layanan global, kami memanggil komponen ini di app.component.html :

// app.component.html

<router-outlet></router-outlet>
<app-notification></app-notification>

Untuk memfasilitasi demonstrasi, kami menambahkan tombol di user-list.component.html untuk memicu demonstrasi dengan mudah:

// user-list.component.html

<button (click)="showNotification()">klik tampilkan notifikasi</button>

memicu kode yang relevan:

// user-list.component.ts

impor {NotificationService} dari 'src/app/services/notification.service';

// ...
konstruktor(
  Layanan pemberitahuan pribadi: Layanan Pemberitahuan
) {}

//Tampilkan notifikasi showNotification(): void {
  this.notificationService.changePrimarySecondary('Informasi utama 1');
  this.notificationService.showProcessNotification();
  setWaktu habis(() => {
    this.notificationService.changePrimarySecondary('Informasi utama 2', 'Informasi sekunder 2');
    this.notificationService.showSuccessNotification();
  }, 1000)
}

Sampai disini kita sudah selesai, kita sudah berhasil melakukan simulasi fungsi notification . Kami dapat memodifikasi komponen layanan terkait sesuai dengan kebutuhan aktual dan menyesuaikannya untuk memenuhi kebutuhan bisnis. Jika kami mengembangkan sistem untuk penggunaan internal, disarankan untuk menggunakan perpustakaan UI yang matang. Mereka telah membantu kami merangkum berbagai komponen dan layanan, sehingga menghemat banyak waktu pengembangan.