1. Введение

Загрузка важна для веб-сайта, она может сообщить пользователю, что поток обрабатывается, иначе пользователь не будет знать, что происходит. Итак, я представлю отличный пакет загрузки, который поможет вам решить проблему с загрузкой!

2. ngx-загрузка

ngx-loading — это очень красивый и настраиваемый индикатор загрузки для Angular. Имеются гибкие параметры конфигурации, которые позволяют настраивать различные стили загрузки. Вы можете установить ngx-loading с помощью команды ниже:

Хотите хорошо торговать в cTrader? ›› ПОПРОБУЙТЕ! ‹‹

npm install --save ngx-loading

И вы можете найти использование базы в github.

3. Использование в общей раскладке

При обычном использовании вам необходимо добавить приведенный ниже код на каждую страницу html, поэтому в этой статье я покажу вам, как использовать ngx-loading в обычном макете.

<ngx-loading
    [show]="loading"
    [config]="{ backdropBorderRadius: '3px' }"
    [template]="customLoadingTemplate"
></ngx-loading>

3.1. Создать сервис

Идея заключается в том, что мы поместим ngx-loading в макет HTML общей (или родительской) страницы, поэтому мы не сможем напрямую управлять им на дочерней странице. Решение состоит в том, что мы можем использовать Subject.

Subject — это особый тип Observable, который позволяет передавать значения многим наблюдателям. Субъекты похожи на EventEmitters.

Итак, мы можем создать службу для обработки Subject. Предположим, нам просто нужно управлять start и stop, чтобы показать необходимую загрузку, поэтому создайте эти два метода в сервисе и не забудьте освободить объект, полный код, как показано ниже:

import { Injectable, OnDestroy } from "@angular/core";
import { Subject } from "rxjs";
@Injectable({
  providedIn: 'root',
})
export class LoadingService implements  OnDestroy {
  // Observable string sources
  private emitChangeSource = new Subject<boolean>();
  // Observable string streams
  changeEmitted$ = this.emitChangeSource.asObservable();
  // Start loading
  start() {
    this.emitChangeSource.next(true);
  }
  // Stop loading
  stop() {
    this.emitChangeSource.next(false);
  }
  ngOnDestroy() {
    // complete and release the subject
    this.emitChangeSource.complete();
  }
}

3.2. Добавьте загрузку ngx в макет

1) Импортируйте NgxLoadingModule в корневой модуль приложения.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CoreModule } from "./core/core.module";
import { NgxLoadingModule } from "ngx-loading";
@NgModule({
  //...
  imports: [
    //...
    NgxLoadingModule.forRoot({}),
  ],
  //...
})
export class AppModule {}

2) Создайте флаг loading и настройте его в файле основного макета (.ts).

const PrimaryRed = '#dd0031';
const SecondaryBlue = '#1976d2';
//...
//set the loading flag
loading = false;
//set the loading config
//reference:  https://github.com/Zak-C/ngx-loading#config-options
config = {
  animationType: ngxLoadingAnimationTypes.threeBounce,
  primaryColour: PrimaryRed,
  secondaryColour: SecondaryBlue,
  tertiaryColour: PrimaryRed,
  backdropBorderRadius: '3px',
};

3) Подпишитесь и обновляйте статус загрузки в основном макете.

// Update loading status
this.loadingService.changeEmitted$.subscribe(isLoading => {
  //console.log(isLoading);
  this.loading = isLoading;
});

4) Добавьте HTML-код загрузки в файл основного интерфейса макета (.html).

<ngx-loading #ngxLoading [show]="loading" [config]="config" [template]="loadingTemplate"></ngx-loading>
  <ng-template #loadingTemplate>
    <div class="loading-class">
      <h4>Please wait ...</h4>
    </div>
</ng-template>

Хорошо, теперь нам просто нужно управлять флагом loading на других дочерних страницах с помощью LoadingService.

4. Использование на дочерних страницах

Мы до сих пор используем этот код для демонстрации. Применяем загрузку при входе в систему, поэтому мы устанавливаем private loadingService: LoadingService в конструкторе компонента входа и вызываем this.loadingService.start(); после отправки формы входа, а затем вызываем this.loadingService.stop(); в случае успешного или неудачного входа:

constructor(//...
    private loadingService: LoadingService) {
  }

//login
login() {
 //start the loading
 this.loadingService.start();
 this.auth
   .login(this.username.value, this.password.value)
   .pipe(filter(authenticated => authenticated))
   .subscribe(
     () => {
       console.log('after logined and redirect');
       //stop the loading
       this.loadingService.stop();
       this.router.navigateByUrl('/user-management');
     },
     (errorRes: HttpErrorResponse) => {
       //stop the loading
       this.loadingService.stop();
       if(errorRes.status == 401){
        //...
       }
       console.log('Error', errorRes);
     }
   );
}

После нажатия кнопки входа в систему отобразится загрузка, как показано ниже.

5. Вывод

Если мы хотим управлять родительским компонентом в дочернем компоненте, нам нужно подписаться на статус изменения и обновлять его в дочернем компоненте, чтобы мы могли использовать Subject и создать для этого сервис! Это та же концепция, что и в этой статье — использование SweetAlert2 в angular.

Если вам понравилась эта статья, подпишитесь на меня здесь, на Medium, чтобы узнавать больше историй о .Net Core, Angular и других технологиях! :)

Стеккадемический

Спасибо, что дочитали до конца. Прежде чем уйти:

  • Пожалуйста, рассмотрите возможность аплодировать и следовать автору! 👏
  • Следуйте за нами в Twitter(X), LinkedIn и YouTube.
  • Посетите Stackademic.com, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.