时间戳

首页 > 解决方案 > 无法从 app.module.ts 文件配置 ngx-ui-loader

angular - 无法从 app.module.ts 文件配置 ngx-ui-loader

问题描述

我正在为我的 Angular 7 项目使用ngx ui 加载程序。

在app.module.ts文件中，我已经像这样导入了 ngx-ui-loader 包：-

import { NgxUiLoaderModule, NgxUiLoaderHttpModule, NgxUiLoaderConfig, SPINNER, POSITION, PB_DIRECTION } from  'ngx-ui-loader';

然后我创建了一个像这样的常量来定义配置参数：-

const ngxUiLoaderConfig: NgxUiLoaderConfig = {
  bgsColor: 'red',
  bgsPosition: POSITION.bottomCenter,
  bgsSize: 40,
  bgsType: SPINNER.rectangleBounce,
  pbDirection: PB_DIRECTION.leftToRight, // progress bar direction
  pbThickness: 5, // progress bar thickness
};

然后NgxUiLoaderModule.forRoot(ngxUiLoaderConfig)在导入数组中添加@NgModule

在app.component.html文件中，我在<ngx-ui-loader></ngx-ui-loader>标签上方添加了<router-outlet></router-outlet>标签。

在app.component.ts文件中，我保留了以下代码

import { NgxUiLoaderService } from 'ngx-ui-loader';

export class AppComponent implements OnInit{
  title = 'medico';
  constructor(private ngxService: NgxUiLoaderService) { }
  ngOnInit() {
    this.ngxService.start(); // start foreground spinner of the master loader with 'default' taskId
    // Stop the foreground loading after 5s
    setTimeout(() => {
      this.ngxService.stop(); // stop foreground spinner of the master loader with 'default' taskId
    }, 300);
  }
}

当我运行页面时，我可以看到加载程序。问题是，即使更改了 app.module.ts 中的配置数据，loader 属性也不会改变。

我究竟做错了什么？

注意：请不要提出“为什么不使用其他加载器，如 http-loader 等”之类的建议。问题是关于为什么 ngx ui 加载程序没有按预期工作。

标签： angularangular7ngx-ui-loader

解决方案

您需要将 bgs 的所有实例更改为 fgs，因此 bgsColor 应该是 fgsColor。

默认情况下，唯一可见的微调器似乎是前景微调器和进度条。

希望有帮助

推荐阅读