我在我的Angle 7项目中使用ngx ui loader。
在 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
的imports数组中。
在 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加载程序无法正常工作。
答案 0 :(得分:2)
您需要将bgs的所有实例更改为fgs,因此bgsColor应该为fgsColor。
默认情况下,唯一可见的微调框是forground微调框和进度条。
希望有帮助