Блог

У меня есть проект Angular 10, использующий загрузочный ngb-progressbar. Я написал сервис, который я могу использовать во всем своем приложении, чтобы показывать и скрывать индикатор выполнения по мере необходимости. Он отображается во время начальной загрузки приложения, но не в любое другое время, когда я его вызываю.

Все компилируется и работает нормально, и никаких ошибок в консоли не видно. Я попытался показать весь соответствующий код.

progress-bar.component.html

Примечание: если я удалю *ngIf=»загрузка» отсюда, индикатор выполнения отображается на каждой странице. Так что я думаю, что с моей загрузкой все в порядке.

 <div id="content-loading" class="overlay" *ngIf="loading">
    <div class="progress">
        <ngb-progressbar value="1000" style="width: 100%">Loading</ngb-progressbar>
    </div>
</div>
  

progress-bar.component.ts

 import { Component } from '@angular/core';
import { NgbProgressbarConfig } from '@ng-bootstrap/ng-bootstrap';
import { ProgressBarService } from './progress-bar.service';

@Component({
    selector: 'ngbd-progressbar',
    templateUrl: './progress-bar.component.html',
    providers: [NgbProgressbarConfig],
    //moduleId: module.id
})

export class ProgressBarComponent  {
    public loading: boolean;

    constructor(config: NgbProgressbarConfig, progressBar: ProgressBarService) {
        config.max = 1000;
        config.striped = true;
        config.animated = true;
        config.type = 'primary';

        progressBar.status.subscribe((status: boolean) => {
            this.loading = status;
        });
    }
}
  

progress-bar.service.ts

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

@Injectable()
export class ProgressBarService {
    private _loading: boolean = false;

    public status: Subject<boolean> = new Subject();

    constructor() {

    }

    public get loading(): boolean {
        return this._loading;
    }

    public set loading(v: boolean) {
        this._loading = v;
        this.status.next(v);
    }

    public start(): void {
        this.loading = true;
    }

    public stop(): void {
        this.loading = false;
    }
}
  

Он экспортируется из общего компонента

shared.component.ts

 export * from './progress-bar/progress-bar.component';
  

shared.service.ts

 export * from './progress-bar/progress-bar.service';
  

And imported into the app.module

app.module

 import { ProgressBarComponent } from './shared/shared.component';
import { ProgressBarService } from './shared/shared.service';
...
declarations: [
ProgressBarComponent,
]
providers: [
ProgressBarService,
]

  

And put in the app component html

app.component.html

 <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <breadcrumb></breadcrumb>
                        <ngbd-progressbar></ngbd-progressbar> 
                    </div>
                    <div class="col-lg-12">
                        <router-outlet></router-outlet>
                    </div>
                </div>
            </div>
        </div>
  

Что касается использования в компоненте, оно предполагает использование базового компонента

base.component.ts

 import { ProgressBarService } from '../progress-bar/progress-bar.service';
...
export class BaseComponent {
    protected _progressBarService: ProgressBarService;

    constructor(
        progressBarService: ProgressBarService,
        toastr: ToastrService) {
            
            this._progressBarService = progressBarService;
            this._toastr = toastr;
         }


}
  

И затем использование в компоненте выглядит следующим образом. Поведение — это просто отсутствие наложения индикатора выполнения.

регистр-index.component.ts

 import { BaseComponent } from '../../shared/ui/base.component';
import { ProgressBarService } from '../../shared/progress-bar/progress-bar.service';
...
export class CaseIndexComponent extends BaseComponent implements OnInit {

constructor(
      progressBarService: ProgressBarService,
) { super(progressBarService, toastr); }
...
search(e: any): void {
this._progressBarService.start();
      this._caseService.getByCriteria(criteria)
          .subscribe(c => this.searchSuccess(c),
              error => this.displayError(error));
}
...
searchSuccess(cases: Case[]): void {
      this.cases = cases;
      this._progressBarService.stop();

      if (this.cases.length == 0) {
          this._toastr.info('No Search Results');
      }
  }
  

Спасибо за чтение.