Angular utilise le service pour implémenter des services personnalisés (notification)

Dans l'article précédent, nous avons mentionné que le

service peut non seulement être utilisé pour traiter les requêtes API, mais a également d'autres utilisations

, comme la mise en œuvre de notification dont nous parlerons dans cet article. [Tutoriels associés recommandés : "Tutoriel Angular"]

Les rendus sont les suivants :

L’interface utilisateur peut être ajustée plus tard

, alors décomposons-la étape par étape.

Pour ajouter un service,

nous ajoutons le fichier de service notification.service.ts dans app/services (veuillez utiliser la ligne de commande pour le générer) et ajoutons le contenu associé :

// notification.service.ts

importer {Injectable} depuis '@angular/core' ;
importer {Observable, Sujet} depuis 'rxjs' ;

// Énumération des statuts de notification export enum NotificationStatus {
  Processus = "progrès",
  Succès = "succès",
  Échec = "échec",
  Terminé = "terminé"
}

@Injectable({
  fourni dans : 'root'
})
classe d'exportation NotificationService {

  notification privée : Subject<NotificationStatus> = new Subject();
  message publicObj : any = {
    primaire: '',
    secondaire : ''
  }

  // Convertir en un public observable getNotification() : Observable<NotificationStatus> {
    renvoie this.notify.asObservable();
  }

  // Notification en cours public showProcessNotification() {
    this.notify.next(NotificationStatus.Process)
  }

  // Notification de réussite publique showSuccessNotification() {
    this.notify.next (NotificationStatus.Success)
  }

  //Fin de notification publique showEndedNotification() {
    this.notify.next(NotificationStatus.Ended)
  }

  // Modifier les informations public changePrimarySecondary(primaire ? : chaîne, secondaire ? : chaîne) {
    this.messageObj.primary = primaire ;
    this.messageObj.secondary = secondaire
  }

  constructeur() { }
}

Est-ce facile à comprendre...

Nous transformons notify en un objet observable, puis publions diverses informations d'état.

Pour créer un composant,

nous créons un nouveau composant notification dans app/components où les composants publics sont stockés. Vous obtiendrez donc la structure suivante :

notification                                          
├── notification.component.html // Squelette de la page ├── notification.component.scss // Style unique de la page ├── notification.component.spec.ts // Fichier de test └── notification.component.ts // Dans dans le fichier javascript

on définit le squelette de notification :

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

<!--Prise en charge de la fermeture manuelle des notifications-->
<button (click)="closeNotification()">Fermer</button>
<h1>Contenu du rappel : {{ message }}</h1>
<!-- Personnaliser les informations de notification clés-->
<p>{{primaryMessage }></p>
<!-- Personnaliser les informations de notification secondaire-->
<p>{{secondaireMessage }></p>

Ensuite, nous modifions simplement le squelette et ajoutons le style suivant :

// notification.component.scss

:hôte {
  poste : fixe ;
  haut : -100 % ;
  à droite : 20 px ;
  couleur d'arrière-plan : #999 ;
  bordure : 1px solide #333 ;
  rayon de bordure : 10 px ;
  largeur : 400 px ;
  hauteur : 180px ;
  remplissage : 10 px ;
  // Faites attention au contenu de active ici. Il n'apparaît que lorsqu'une notification apparaît &.active {.
    haut : 10px ;
  }
  &.succès{}
  &.progrès {}
  &.échec {}
  &.terminé {}
}

Les quatre noms de classe de success, progress, failure, ended correspondent à l'énumération définie par le service de notification. Vous pouvez ajouter des styles associés selon vos propres préférences.

Enfin, nous ajoutons le code javascript comportemental.

// notification.component.ts

importer { Component, OnInit, HostBinding, OnDestroy } depuis '@angular/core' ;
//Nouveau point de connaissance rxjs
importer { Abonnement } depuis 'rxjs' ;
importer {debounceTime} depuis 'rxjs/operators' ;
//Introduire les services associés import { NotificationStatus, NotificationService } from 'src/app/services/notification.service';

@Composant({
  sélecteur : 'app-notification',
  templateUrl : './notification.component.html',
  styleUrls : ['./notification.component.scss']
})
classe d'exportation NotificationComponent implémente OnInit, OnDestroy {
  
  // Temps anti-tremblement, lecture seule lecture seule privée NOTIFICATION_DEBOUNCE_TIME_MS = 200 ;
  
  notification protégéeAbonnement ! : Abonnement ;
  minuterie privée : any = null ;
  message public : chaîne = ''
  
  // Mappage du service de notification des informations d'énumération private reflexObj : any = {
    progression : "en cours",
    succès : "succès",
    échec : "échec",
    terminé : "fin"
  }

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

  public PrimaryMessage ! : chaîne ;
  message secondaire public ! : chaîne ;

  constructeur(
    service de notification privé : NotificationService
  ) { }

  ngOnInit() : vide {
    ceci.init()
  }

  public init() {
    //Ajouter des informations d'abonnement pertinentes this.notificationSubscription = this.notificationService.getNotification()
      .tuyau(
        debounceTime(this.NOTIFICATION_DEBOUNCE_TIME_MS)
      )
      .subscribe((notificationStatus : NotificationStatus) => {
        si (état de notification) {
          this.resetTimeout();
          //Ajouter des styles associés this.notificationCssClass = `active ${ notificationStatus }`
          this.message = this.reflectObj[notificationStatus]
          // Récupère le message principal personnalisé this.primaryMessage = this.notificationService.messageObj.primary;
          // Obtenez des informations secondaires personnalisées this.secondaryMessage = this.notificationService.messageObj.secondary;
          si (notificationStatus === NotificationStatus.Process) {
            this.resetTimeout()
            this.timer = setTimeout(() => {
              ceci.resetView()
            }, 1000)
          } autre {
            this.resetTimeout();
            this.timer = setTimeout(() => {
              this.notificationCssClass = ''
              ceci.resetView()
            }, 2000)
          }
        }
      })
  }

  private resetView() : void {
    ce.message = ''
  }
  
  // Ferme le timer privé resetTimeout() : void {
    si (ce.timer) {
      clearTimeout (ce.timer)
    }
  }

  // Ferme la notification publique closeNotification() {
    this.notificationCssClass = ''
    this.resetTimeout()
  }
  
  // Le composant est détruit ngOnDestroy() : void {
    this.resetTimeout();
    //Annuler tous les messages d'abonnement this.notificationSubscription.unsubscribe()
  }

}

Ici, nous introduisons le point de connaissance de rxjs . RxJS est une bibliothèque de programmation réactive utilisant Observables , ce qui facilite l'écriture de code asynchrone ou basé sur le rappel. C'est une excellente bibliothèque, et vous en apprendrez plus à ce sujet dans les prochains articles.

Ici, nous utilisons la fonction anti-shake anti debounce . La fonction anti-shake signifie qu'après le déclenchement d'un événement, il ne peut être exécuté qu'une fois après n secondes. Si l'événement est à nouveau déclenché dans les n secondes, le temps d'exécution de la fonction sera. recalculé. Pour faire simple : lorsqu’une action est déclenchée en continu, seule la dernière fois est exécutée.

ps : fonction de limitation throttle : restreindre l'exécution d'une fonction une seule fois dans un certain laps de temps .

Pendant l'entretien, l'intervieweur aime demander...

Appel

Comme il s'agit d'un service global, nous appelons ce composant dans app.component.html :

// app.component.html

<sortie-routeur></sortie-routeur>
<app-notification></app-notification>

Afin de faciliter la démonstration, nous ajoutons un bouton dans user-list.component.html pour déclencher facilement la démonstration :

// user-list.component.html

<button (click)="showNotification()">cliquez sur Afficher la notification</button>

déclenche le code correspondant :

// user-list.component.ts

importer {NotificationService } depuis 'src/app/services/notification.service' ;

//...
constructeur(
  service de notification privé : NotificationService
) { }

//Afficher la notification showNotification() : void {
  this.notificationService.changePrimarySecondary('Informations primaires 1');
  this.notificationService.showProcessNotification();
  setTimeout(() => {
    this.notificationService.changePrimarySecondary('Informations primaires 2', 'Informations secondaires 2');
    this.notificationService.showSuccessNotification();
  }, 1000)
}

À ce stade, nous avons terminé, nous avons simulé avec succès la fonction notification . Nous pouvons modifier les composants de service associés en fonction des besoins réels et les personnaliser pour répondre aux besoins de l'entreprise. Si nous développons un système à usage interne, il est recommandé d'utiliser des bibliothèques d'interface utilisateur matures. Elles nous ont aidé à encapsuler divers composants et services, nous faisant gagner beaucoup de temps de développement.