Angular использует сервис для реализации пользовательских сервисов (уведомление)

В предыдущей статье мы упоминали, что

сервис можно использовать не только для обработки API-запросов, но и для других целей

, например для реализации notification , о которых мы поговорим в этой статье. [Рекомендуемые соответствующие учебные пособия: «Учебное пособие по Angular»]

Визуализация выглядит следующим образом:

Пользовательский интерфейс можно будет настроить позже

, поэтому давайте разберем его шаг за шагом.

Чтобы добавить службу,

мы добавляем файл службы notification.service.ts в app/services (для его создания используйте командную строку) и добавляем соответствующий контент:

// Notification.service.ts

import {Injectable} из '@angular/core';
импортировать {Наблюдаемый, Тема} из 'rxjs';

// Перечисление статуса уведомления Export enum NotificationStatus {
  Процесс = "прогресс",
  Успех = «успех»,
  Неудача = «неудача»,
  Завершено = «закончено»
}

@Инъекционный({
  предоставлено: 'корень'
})
класс экспорта NotificationService {

  частное уведомление: Тема<NotificationStatus> = новая тема();
  публичное сообщениеObj: любой = {
    начальный: '',
    вторичное: ''
  }

  // Преобразование в наблюдаемый public 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,вторичный?:string) {
    this.messageObj.primary = основной;
    this.messageObj.вторичный = вторичный
  }

  конструктор() { }
}

Легко ли понять...

Мы превращаем notify в наблюдаемый объект, а затем публикуем различную информацию о статусе.

Чтобы создать компонент,

мы создаем новый компонент notification в app/components где хранятся общедоступные компоненты. Таким образом, вы получите следующую структуру:

уведомление                                          
├── Notification.comComponent.html // Скелет страницы ├── Notification.comComponent.scss // Уникальный стиль страницы ├── Notification.comComponent.spec.ts // Тестовый файл └── Notification.comComponent.ts // В в файле javascript

мы определяем скелет notification :

<!-- Notification.comComponent.html -->

<!--Поддержка ручного закрытия уведомлений-->
<button (click)="closeNotification()">Закрыть</button>
<h1>Содержимое напоминания: {{ message }}</h1>
<!-- Настройка ключевой информации уведомления-->
<p>{{primaryMessage }}</p>
<!-- Настройте дополнительную информацию уведомления-->
<p>{{ SecondaryMessage }}</p>

Далее мы просто изменяем скелет и добавляем следующий стиль:

// Notification.comComponent.scss

:хозяин {
  положение: фиксированное;
  верх: -100%;
  справа: 20 пикселей;
  цвет фона: #999;
  граница: 1 пиксель, сплошная #333;
  радиус границы: 10 пикселей;
  ширина: 400 пикселей;
  высота: 180 пикселей;
  отступ: 10 пикселей;
  // Обратите внимание на содержимое active. Оно появляется только при появлении уведомления &.active {.
    верх: 10 пикселей;
  }
  &.успех{}
  &.прогресс {}
  &.отказ {}
  &.закончено {}
}

Четыре имени классов: success, progress, failure, ended соответствуют перечислению, определенному службой уведомлений. Вы можете добавить связанные стили в соответствии со своими предпочтениями.

Наконец, мы добавляем поведенческий код javascript .

// уведомление.компонент.ц

импортировать {Component, OnInit, HostBinding, OnDestroy} из '@angular/core';
//Новая точка знаний rxjs
импортировать {подписку} из 'rxjs';
импортируйте {debounceTime} из «rxjs/operators»;
//Внедрение связанных служб import { NotificationStatus, NotificationService } from 'src/app/services/notification.service';

@Компонент({
  селектор: 'приложение-уведомление',
  templateUrl: './notification.comComponent.html',
  styleUrls: ['./notification.comComponent.scss']
})
класс экспорта NotificationComponent реализует OnInit, OnDestroy {
  
  // Время защиты от встряхивания, только для чтения. Private readonly NOTIFICATION_DEBOUNCE_TIME_MS = 200;
  
  защищенное уведомлениеПодписка!: Подписка;
  частный таймер: любой = ноль;
  публичное сообщение: строка = ''
  
  // сопоставление службы уведомлений информации перечисления Private ReflectObj: Any = {
    прогресс: «в процессе»,
    успех: «успех»,
    неудача: «неудача»,
    закончилось: "конец"
  }

  @HostBinding('класс') NotificationCssClass = '';

  общественное первичное сообщение!: строка;
  общественное вторичное сообщение!: строка;

  конструктор(
    частная служба уведомлений: NotificationService
  ) { }

  ngOnInit(): пустота {
    это.инит()
  }

  общественная инициализация () {
    //Добавляем соответствующую информацию о подписке this.notificationSubscription = this.notificationService.getNotification()
      .трубка(
        debounceTime(this.NOTIFICATION_DEBOUNCE_TIME_MS)
      )
      .subscribe((notificationStatus: NotificationStatus) => {
        если (состояние уведомления) {
          это.resetTimeout();
          //Добавляем связанные стили this.notificationCssClass = `active ${ NotificationStatus }`
          this.message = this.reflectObj[notificationStatus]
          // Получаем собственное основное сообщение this.primaryMessage = this.notificationService.messageObj.primary;
          // Получаем пользовательскую вторичную информацию this. SecondaryMessage = this.notificationService.messageObj. Secondary;
          if(notificationStatus === NotificationStatus.Process) {
            это.resetTimeout()
            this.timer = setTimeout(() => {
              это.resetView()
            }, 1000)
          } еще {
            это.resetTimeout();
            this.timer = setTimeout(() => {
              this.notificationCssClass = ''
              это.resetView()
            }, 2000)
          }
        }
      })
  }

  частный сбросView(): void {
    это.сообщение = ''
  }
  
  // Закрываем таймер Private ResetTimeout(): void {
    если (этот.таймер) {
      ClearTimeout(this.timer)
    }
  }

  // Закрытие уведомления public closeNotification() {
    this.notificationCssClass = ''
    это.resetTimeout()
  }
  
  // Компонент уничтожен ngOnDestroy(): void {
    это.resetTimeout();
    //Отменяем все сообщения о подписке this.notificationSubscription.unsubscribe()
  }

}

Здесь мы представляем суть rxjs . RxJS — это библиотека реактивного программирования, использующая Observables , которая упрощает написание асинхронного кода или кода на основе обратного вызова. Это отличная библиотека, и вы узнаете о ней больше в следующих нескольких статьях.

Здесь мы используем функцию предотвращения debounce . Функция anti-shake означает, что после запуска события оно может быть выполнено только один раз через n секунд. Если событие будет вызвано снова в течение n секунд, время выполнения функции будет равно. пересчитан. Проще говоря: когда действие запускается постоянно, выполняется только последний раз.

ps: функция throttle : ограничить выполнение функции только один раз в течение определенного периода времени .

Во время интервью интервьюер любит спрашивать...

Вызов

Поскольку это глобальный сервис, мы вызываем этот компонент в app.component.html :

// app.comComponent.html

<роутер-выход></роутер-выход>
<app-notification></app-notification>

Чтобы облегчить демонстрацию, мы добавляем кнопку в user-list.component.html , чтобы легко запустить демонстрацию:

// user-list.comComponent.html

<button (click)="showNotification()">нажмите показать уведомление</button>

запускает соответствующий код:

// user-list.comComponent.ts

импортировать { NotificationService } из «src/app/services/notification.service»;

// ...
конструктор(
  частная служба уведомлений: NotificationService
) { }

//Показать уведомление showNotification(): void {
  this.notificationService.changePrimarySecondary('Основная информация 1');
  this.notificationService.showProcessNotification();
  setTimeout(() => {
    this.notificationService.changePrimarySecondary('Основная информация 2', 'Вторичная информация 2');
    this.notificationService.showSuccessNotification();
  }, 1000)
}

На этом мы закончили, мы успешно смоделировали функцию notification . Мы можем модифицировать связанные сервисные компоненты в соответствии с реальными потребностями и настроить их в соответствии с потребностями бизнеса. Если мы разрабатываем систему для внутреннего использования, рекомендуется использовать зрелые библиотеки пользовательского интерфейса. Они помогли нам инкапсулировать различные компоненты и сервисы, сэкономив нам много времени на разработку.