我正在实现一个最初工作正常的微调器,但即使在页面加载后它仍继续旋转。
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class LoaderService {
public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
display(value: boolean) {
this.status.next(value);
}
}
导入LoadService并将其添加到providers数组
我正在检查showLoader的值以查看它是true还是false,因为true会显示加载器而false会不会。
<router-outlet>
<span *ngIf="showLoader" class="loading"></span>{{showLoader}}
</router-outlet>
导入的LoaderService
export class AppComponent {
//for the spinner
showLoader: boolean;
//LoaderService is for the spinner
constructorprivate loaderService: LoaderService) { }
//for the spinner
ngOnInit() {
this.loaderService.status.subscribe((val: boolean) => {
this.showLoader = val;
});
}
}
@Component({
selector: 'app-custom',
templateUrl: './custom.component.html',
styleUrls: ['./custom.component.css']
})
export class CustomComponent implements OnInit {
//LoaderService is for the spinner
constructor(private loaderService: LoaderService) { }
ngOnInit() {
//http call starts
this.loaderService.display(true);
}
ngAfterViewInit() {
d3.json("https://...", function(data) {
createChart(data);
});
function createChart(data) {
...
dc.renderAll();
}//end of function
}//end of ngAfterView
}//end of export class
我正在显示一些直流图表,我想要在显示图表后停止微调器。
我需要使用this.loaderService.display(false);
停止微调器,但在dc.renderAll()之后立即使用它;将showLoader的值显示为false,从而不显示微调器。
任何形式的帮助将不胜感激。感谢。
答案 0 :(得分:1)
一个选项是在AppComponent中为showLoader
添加默认值。
您可以使用true
showLoader: boolean = true;
作为默认设置
export class AppComponent {
//for the spinner
showLoader: boolean = true;
//LoaderService is for the spinner
constructorprivate loaderService: LoaderService) { }
//for the spinner
ngOnInit() {
this.loaderService.status.subscribe((val: boolean) => {
this.showLoader = val;
});
}
}
默认情况下会显示微调器。 然后你可以像这样设置它。
<强> custom.component.ts 强>
ngAfterViewInit() {
let loaderService = this.loaderService;
d3.json("https://...", function(data) {
createChart(data);
});
function createChart(data) {
...
dc.renderAll();
loaderService.display(false);
}//end of function
}//end of ngAfterView
答案 1 :(得分:0)
如果理解正确,dc.renderAll()是一个异步函数,因此您需要重新构建您的应用程序,以便隐藏微调器 AFTER 该函数实际上已经结束处理。
实现此目的的一种方法是将renderAll()转换为observable并订阅它,在订阅中调用loaderService.display(false)。
dc.renderAll().subscribe(
value => this.loaderService.display(false)
)