angular - Angular 10 ngb-progress bar 不显示

Question

我有一个使用 Bootstrap ngb-progressbar 的 Angular 10 项目。我编写了一个服务，我可以在整个应用程序中使用它来根据需要显示和隐藏进度条。它在初始应用程序加载期间显示，但在我调用它的任何其他时间都不会显示。

一切都编译并运行良好，并且在控制台中没有看到任何错误。我试图显示所有相关代码。

progress-bar.component.html
注意：如果我从这里删除 *ngIf="loading" ，进度条会显示在每个页面上。所以我认为我的引导程序一切正常。

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

进度条.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;
        });
    }
}

进度条.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';

共享服务.ts

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

并导入到 app.module
app.module

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

并放入app组件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;
         }


}

然后在一个组件中的用法如下。行为只是没有看到进度条覆盖。
案例索引.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');
      }
  }

谢谢阅读。

标签： angulartypescriptng-bootstrap