ng slim loader在点击链接时重复3次

编程问答 2022-08-11

问题描述

我已经在应用程序中集成了角度细长型装载机，它工作正常，但是我希望装载机在单击页面链接时重复3到2次。

我正在ts文件和html文件上使用以下代码，我想在链接下方，请对此改进提供帮助，在此先感谢

https://vaadin.com/ 

<ng2-slim-loading-bar [color]="'blue'" [height]="'4px'"></ng2-slim-loading-bar>

startLoading() {
    this.slimloadingBarService.start(() => {
      console.log('Loading complete');
    });
  }
  finishLoading(){
    this.slimloadingBarService.complete();
  }

  navigationInterceptor(event): void {
    if (event instanceof NavigationStart) {
      this.startLoading();
    }
    if (event instanceof NavigationEnd) {
      this.finishLoading();    }
    if (event instanceof NavigationCancel) {
      this.finishLoading();
    }
    if (event instanceof NavigationError) {
      this.finishLoading();
    }
  }

解决方法

根据您的描述，最简单的方法可能是使用* ngFor循环创建多个元素。

在您的.ts文件中


repeat = [];

constructor(){
  this.repeat.length = 3
}

在您的HTML中


<ng2-slim-loading-bar *ngFor="let instance of repeat" [color]="'blue'" [height]="'4px'"></ng2-slim-loading-bar>
angularangularloaderloaderslimslim