我正在实现一个旋转器,它最初工作正常,但即使在页面加载后它仍然继续旋转。
loader.service.ts
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);
}
}
app.module.ts
导入LoadService并将其添加到providers数组中
app.component.html
我正在检查 showLoader 的值,看看它是 true 还是 false,因为 true 会显示加载程序, false 则不会。
<router-outlet>
<span *ngIf="showLoader" class="loading"></span>{{showLoader}}
</router-outlet>
app.component.ts
导入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.ts
@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,因此不会出现微调器。
任何形式的帮助将不胜感激。谢谢。
最佳答案
一种选择是在 AppComponent 中为 showLoader
添加默认值。
您可以使用 showLoader: boolean = true;
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
关于javascript - 在 Angular 应用程序中加载完成后如何停止旋转器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48922075/