Angular verwendet einen Dienst, um benutzerdefinierte Dienste zu implementieren (Benachrichtigung).

Im vorherigen Artikel haben wir erwähnt, dass

der Dienst nicht nur zur Verarbeitung von API-Anfragen verwendet werden kann, sondern auch andere Verwendungszwecke hat

, beispielsweise die Implementierung von notification , über die wir in diesem Artikel sprechen werden. [Empfohlene verwandte Tutorials: „Angular Tutorial“]

Die Darstellungen sind wie folgt:

Die Benutzeroberfläche kann später angepasst werden

. Lassen Sie uns sie also Schritt für Schritt aufschlüsseln.

Um einen Dienst hinzuzufügen,

fügen wir die Dienstdatei notification.service.ts in app/services hinzu (bitte verwenden Sie die Befehlszeile, um sie zu generieren) und fügen den zugehörigen Inhalt hinzu:

// notification.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

// Aufzählung des Benachrichtigungsstatus export enum NotificationStatus {
  Prozess = „Fortschritt“,
  Erfolg = „Erfolg“,
  Fehler = „Fehler“,
  Beendet = „beendet“
}

@Injectable({
  bereitgestelltIn: 'root'
})
Exportklasse NotificationService {

  private notify: Subject<NotificationStatus> = new Subject();
  öffentliche messageObj: any = {
    primär: '',
    sekundär: ''
  }

  // In ein beobachtbares öffentliches getNotification() konvertieren: Observable<NotificationStatus> {
    return this.notify.asObservable();
  }

  // Benachrichtigung läuft public showProcessNotification() {
    this.notify.next(NotificationStatus.Process)
  }

  // Erfolgsbenachrichtigung öffentlich showSuccessNotification() {
    this.notify.next(NotificationStatus.Success)
  }

  //Benachrichtigung beenden public showEndedNotification() {
    this.notify.next(NotificationStatus.Ended)
  }

  // Informationen ändern öffentlich changePrimarySecondary(primär?: string, sekundär?: string) {
    this.messageObj.primary = primär;
    this.messageObj.secondary = sekundär
  }

  Konstruktor() { }
}

Ist es leicht zu verstehen ...

Wir verwandeln notify in ein beobachtbares Objekt und veröffentlichen dann verschiedene Statusinformationen.

Um eine Komponente zu erstellen,

erstellen wir eine neue notification in app/components wo öffentliche Komponenten gespeichert sind. Sie erhalten also die folgende Struktur:

Benachrichtigung                                          
├── notification.component.html // Seitengerüst ├── notification.component.scss // Einzigartiger Seitenstil ├── notification.component.spec.ts // Testdatei └── notification.component.ts // In In der Javascript-Datei

definieren wir das Grundgerüst der notification :

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

<!--Unterstützt das manuelle Schließen von Benachrichtigungen-->
<button (click)="closeNotification()">Schließen</button>
<h1>Erinnerungsinhalt: {{ message }}</h1>
<!-- Passen Sie die wichtigsten Benachrichtigungsinformationen an-->
<p>{{ PrimaryMessage }}</p>
<!-- Sekundäre Benachrichtigungsinformationen anpassen-->
<p>{{ sekundäreMessage }}</p>

Als Nächstes ändern wir einfach das Grundgerüst und fügen den folgenden Stil hinzu:

// notification.component.scss

:Gastgeber {
  Position: fest;
  oben: -100 %;
  rechts: 20px;
  Hintergrundfarbe: #999;
  Rand: 1px durchgezogen #333;
  Randradius: 10px;
  Breite: 400px;
  Höhe: 180px;
  Polsterung: 10px;
  // Achten Sie hier auf den Inhalt von active. Er erscheint nur, wenn eine Benachrichtigung erscheint.
    oben: 10px;
  }
  &.Erfolg{}
  &.Fortschritt {}
  &.Versagen {}
  &.endet {}
}

Die vier Klassennamen „ success, progress, failure, ended entsprechen der vom Benachrichtigungsdienst definierten Aufzählung. Sie können verwandte Stile entsprechend Ihren eigenen Vorlieben hinzufügen.

Zum Schluss fügen wir den Verhaltens javascript Code hinzu.

// notification.component.ts

import { Component, OnInit, HostBinding, OnDestroy } from '@angular/core';
//Neuer Wissenspunkt rxjs
import { Subscription } from 'rxjs';
importiere {debounceTime} aus 'rxjs/operators';
//Zugehörige Dienste einführen import { NotificationStatus, NotificationService } from 'src/app/services/notification.service';

@Komponente({
  Selektor: 'App-Benachrichtigung',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
Die Exportklasse NotificationComponent implementiert OnInit, OnDestroy {
  
  // Anti-Shake-Zeit, schreibgeschützt, privat, schreibgeschützt NOTIFICATION_DEBOUNCE_TIME_MS = 200;
  
  protected notificationSubscription!: Abonnement;
  privater Timer: any = null;
  öffentliche Nachricht: string = ''
  
  // Benachrichtigungsdienstzuordnung von Aufzählungsinformationen private ReflectObj: any = {
    Fortschritt: „in Bearbeitung“,
    Erfolg: „Erfolg“,
    Scheitern: „Misserfolg“,
    beendet: „Ende“
  }

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

  öffentliche primäre Nachricht!: string;
  öffentliche sekundäre Nachricht!: string;

  Konstruktor(
    privater Benachrichtigungsservice: NotificationService
  ) { }

  ngOnInit(): void {
    this.init()
  }

  öffentliche init() {
    // Relevante Abonnementinformationen hinzufügen this.notificationSubscription = this.notificationService.getNotification()
      .Rohr(
        debounceTime(this.NOTIFICATION_DEBOUNCE_TIME_MS)
      )
      .subscribe((notificationStatus: NotificationStatus) => {
        if(notificationStatus) {
          this.resetTimeout();
          //Verwandte Stile hinzufügen this.notificationCssClass = `active ${ notificationStatus }`
          this.message = this.reflectObj[notificationStatus]
          // Benutzerdefinierte Primärnachricht abrufen this.primaryMessage = this.notificationService.messageObj.primary;
          // Benutzerdefinierte Sekundärinformationen abrufen this.secondaryMessage = this.notificationService.messageObj.secondary;
          if(notificationStatus === NotificationStatus.Process) {
            this.resetTimeout()
            this.timer = setTimeout(() => {
              this.resetView()
            }, 1000)
          } anders {
            this.resetTimeout();
            this.timer = setTimeout(() => {
              this.notificationCssClass = ''
              this.resetView()
            }, 2000)
          }
        }
      })
  }

  private resetView(): void {
    this.message = ''
  }
  
  // Timer schließen private resetTimeout(): void {
    if(this.timer) {
      clearTimeout(this.timer)
    }
  }

  // Benachrichtigung schließen public closeNotification() {
    this.notificationCssClass = ''
    this.resetTimeout()
  }
  
  // Komponente wird zerstört ngOnDestroy(): void {
    this.resetTimeout();
    //Alle Abonnementnachrichten abbrechen this.notificationSubscription.unsubscribe()
  }

}

Hier stellen wir den Wissenspunkt von rxjs vor, einer reaktiven Programmierbibliothek , die Observables verwendet, was das Schreiben von asynchronem oder Callback-basiertem Code erleichtert. Dies ist eine großartige Bibliothek, und Sie werden in den nächsten Artikeln mehr darüber erfahren.

Hier verwenden wir die debounce Anti-Shake-Funktion, was bedeutet, dass ein Ereignis nach dem Auslösen nur einmal nach n Sekunden ausgeführt werden kann. Wenn das Ereignis innerhalb von n Sekunden erneut ausgelöst wird, beträgt die Ausführungszeit der Funktion neu berechnet. Vereinfacht ausgedrückt: Wenn eine Aktion kontinuierlich ausgelöst wird, wird nur das letzte Mal ausgeführt.

ps: throttle : Beschränken Sie die Ausführung einer Funktion nur einmal innerhalb eines bestimmten Zeitraums .

Während des Interviews fragt der Interviewer gerne ...

Aufruf

Da es sich um einen globalen Dienst handelt, rufen wir diese Komponente in app.component.html auf:

// app.component.html

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

Um die Demonstration zu erleichtern, fügen wir in user-list.component.html eine Schaltfläche hinzu, um die Demonstration einfach auszulösen:

// user-list.component.html

<button (click)="showNotification()">Klicken Sie auf Benachrichtigung anzeigen</button>

löst den entsprechenden Code aus:

// user-list.component.ts

import { NotificationService } aus 'src/app/services/notification.service';

// ...
Konstruktor(
  privater Benachrichtigungsservice: NotificationService
) { }

//Benachrichtigung anzeigen showNotification(): void {
  this.notificationService.changePrimarySecondary('Primärinformation 1');
  this.notificationService.showProcessNotification();
  setTimeout(() => {
    this.notificationService.changePrimarySecondary('Primärinformationen 2', 'Sekundärinformationen 2');
    this.notificationService.showSuccessNotification();
  }, 1000)
}

An diesem Punkt sind wir fertig und haben die notification erfolgreich simuliert. Wir können zugehörige Servicekomponenten je nach tatsächlichem Bedarf modifizieren und an die Geschäftsanforderungen anpassen. Wenn wir ein System für den internen Gebrauch entwickeln, empfiehlt es sich, ausgereifte UI-Bibliotheken zu verwenden. Sie haben uns dabei geholfen, verschiedene Komponenten und Dienste zu kapseln, was uns viel Entwicklungszeit spart.