Angular usa el servicio para implementar servicios personalizados (notificación)

En el artículo anterior mencionamos que

el servicio no solo se puede utilizar para procesar solicitudes de API, sino que también tiene otros usos

, como la implementación de notification de las que hablaremos en este artículo. [Tutoriales relacionados recomendados: "Tutorial angular"]

Las representaciones son las siguientes:

La interfaz de usuario se puede ajustar más tarde

, así que analicémosla paso a paso.

Para agregar un servicio,

agregamos el archivo de servicio notification.service.ts en app/services (use la línea de comando para generarlo) y agregamos contenido relacionado:

// notification.service.ts

importar {Inyectable} desde '@angular/core';
importar {Observable, Asunto} desde 'rxjs';

// Enumeración del estado de notificación export enum NotificationStatus {
  Proceso = "progreso",
  Éxito = "éxito",
  Fallo = "fracaso",
  Finalizado = "finalizado"
}

@Inyectable({
  proporcionado en: 'raíz'
})
exportar clase NotificationService {

  notificación privada: Asunto<Estado de notificación> = nuevo Asunto();
  mensaje públicoObj: cualquiera = {
    primario: '',
    secundario: ''
  }

  // Convertir a un getNotification público observable(): Observable<NotificationStatus> {
    devolver this.notify.asObservable();
  }

  // Notificación en curso public showProcessNotification() {
    this.notify.next(Estado.de.notificación.Proceso)
  }

  // Notificación de éxito pública showSuccessNotification() {
    this.notify.next(Estado de notificación.Éxito)
  }

  //Finalizar notificación pública showEndedNotification() {
    this.notify.next(Estado de notificación.Finalizado)
  }

  // Cambiar información public changePrimarySecondary(¿primario?: cadena, secundario?: cadena) {
    this.messageObj.primary = primario;
    this.messageObj.secundario = secundario
  }

  constructor() { }
}

¿Es fácil de entender?

Convertimos notify en un objeto observable y luego publicamos diversa información de estado.

Para crear un componente,

creamos un nuevo componente notification en app/components donde se almacenan los componentes públicos. Entonces obtendrá la siguiente estructura:

notificación                                          
├── notificacion.component.html // Esqueleto de página ├── notificacion.component.scss // Estilo único de página ├── notificacion.component.spec.ts // Archivo de prueba └── notificacion.component.ts // En En el archivo javascript

definimos el esqueleto de notification :

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

<!--Soporte de cierre manual de notificaciones-->
<botón (hacer clic)="closeNotification()">Cerrar</botón>
<h1>Contenido del recordatorio: {{ mensaje }}</h1>
<!-- Personalizar información de notificación clave-->
<p>{{ mensaje principal }}</p>
<!-- Personalizar información de notificación secundaria-->
<p>{{ secondMessage }}</p>

A continuación, simplemente modificamos el esqueleto y agregamos el siguiente estilo:

// notification.component.scss

:anfitrión {
  posición: fija;
  arriba: -100%;
  derecha: 20px;
  color de fondo: #999;
  borde: 1px sólido #333;
  radio del borde: 10px;
  ancho: 400px;
  altura: 180 píxeles;
  relleno: 10px;
  // Preste atención al contenido de active aquí. Solo aparece cuando aparece una notificación &.active {.
    arriba: 10px;
  }
  &.éxito{}
  &.progreso {}
  &.falla {}
  &.finalizado {}
}

Los cuatro nombres de clase de success, progress, failure, ended corresponden a la enumeración definida por el servicio de notificación. Puede agregar estilos relacionados según sus propias preferencias.

Finalmente, agregamos el código javascript de comportamiento.

// notificación.componente.ts

importar {Componente, OnInit, HostBinding, OnDestroy} desde '@angular/core';
//Nuevo punto de conocimiento rxjs
importar {Suscripción} desde 'rxjs';
importar {debounceTime} desde 'rxjs/operadores';
//Introducir servicios relacionados import { NotificationStatus, NotificationService } de 'src/app/services/notification.service';

@Componente({
  selector: 'notificación de aplicación',
  URL de plantilla: './notificación.component.html',
  styleUrls: ['./notificación.component.scss']
})
la clase de exportación NotificationComponent implementa OnInit, OnDestroy {
  
  // Tiempo anti-vibración, solo lectura privada solo lectura NOTIFICATION_DEBOUNCE_TIME_MS = 200;
  
  notificación protegida ¡Suscripción!: Suscripción;
  temporizador privado: cualquiera = nulo;
  mensaje público: cadena = ''
  
  // mapeo del servicio de notificación de información de enumeración reflexObj privado: cualquiera = {
    progreso: "en progreso",
    éxito: "éxito",
    fracaso: "fracaso",
    terminó: "fin"
  }

  @HostBinding('clase') notificaciónCssClass = '';

  Mensaje primario público!: cadena;
  Mensaje secundario público!: cadena;

  constructor(
    Servicio de notificación privado: Servicio de notificación
  ) { }

  ngOnInit(): nulo {
    esto.init()
  }

  inicio público() {
    //Agregar información de suscripción relevante this.notificationSubscription = this.notificationService.getNotification()
      .tubo(
        tiempo de rebote (this.NOTIFICATION_DEBOUNCE_TIME_MS)
      )
      .subscribe((estado de notificación: estado de notificación) => {
        si (estado de notificación) {
          this.resetTimeout();
          //Agregar estilos relacionados this.notificationCssClass = `active ${ notificationStatus }`
          este.mensaje = this.reflectObj[estado de notificación]
          // Obtener mensaje principal personalizado this.primaryMessage = this.notificationService.messageObj.primary;
          // Obtener información secundaria personalizada this.secundariaMessage = this.notificationService.messageObj.secundaria;
          if(estado de notificación === Estado de notificación.Proceso) {
            esto.resetTimeout()
            this.timer = setTimeout(() => {
              esto.resetView()
            }, 1000)
          } demás {
            this.resetTimeout();
            this.timer = setTimeout(() => {
              this.notificaciónCssClass = ''
              esto.resetView()
            }, 2000)
          }
        }
      })
  }

  resetView privado(): nulo {
    este.mensaje = ''
  }
  
  // Cerrar el temporizador privado resetTimeout(): void {
    si (este.temporizador) {
      clearTimeout(este.temporizador)
    }
  }

  // Cerrar notificación pública closeNotification() {
    this.notificaciónCssClass = ''
    esto.resetTimeout()
  }
  
  // El componente se destruye ngOnDestroy(): void {
    this.resetTimeout();
    //Cancelar todos los mensajes de suscripción this.notificationSubscription.unsubscribe()
  }

}

Aquí, presentamos el punto de conocimiento de rxjs . RxJS es una biblioteca de programación reactiva que utiliza Observables , lo que facilita la escritura de código asincrónico o basado en devolución de llamada. Esta es una gran biblioteca y aprenderá más sobre ella en los próximos artículos.

Aquí utilizamos la función debounce antirrebote. La función antivibración significa que después de que se activa un evento, solo se puede ejecutar una vez después de n segundos. Si el evento se activa nuevamente en n segundos, el tiempo de ejecución de la función será. recalculado. En pocas palabras: cuando una acción se activa continuamente, solo se ejecuta la última vez.

ps: función de throttle : restringe una función para que se ejecute solo una vez dentro de un cierto período de tiempo .

Durante la entrevista, al entrevistador le gusta preguntar...

Llamar

Debido a que se trata de un servicio global, llamamos a este componente en app.component.html :

// app.component.html

<salida-enrutador></salida-enrutador>
<app-notification></app-notification>

Para facilitar la demostración, agregamos un botón en user-list.component.html para activar fácilmente la demostración:

// user-list.component.html

<button (click)="showNotification()">haga clic en mostrar notificación</button>

activa el código relevante:

// user-list.component.ts

importar {NotificationService} desde 'src/app/services/notification.service';

//...
constructor(
  Servicio de notificación privado: Servicio de notificación
) { }

//Mostrar notificación showNotification(): void {
  this.notificationService.changePrimarySecondary('Información primaria 1');
  this.notificationService.showProcessNotification();
  setTimeout(() => {
    this.notificationService.changePrimarySecondary('Información primaria 2', 'Información secundaria 2');
    this.notificationService.showSuccessNotification();
  }, 1000)
}

En este punto, hemos terminado, hemos simulado con éxito la función notification . Podemos modificar los componentes del servicio relacionados según las necesidades reales y personalizarlos para satisfacer las necesidades comerciales. Si estamos desarrollando un sistema para uso interno, se recomienda utilizar bibliotecas de UI maduras. Nos han ayudado a encapsular varios componentes y servicios, ahorrándonos mucho tiempo de desarrollo.