Javascript 在angular应用程序中，加载完成后如何停止微调器？

我正在实现一个微调器，该微调器最初工作正常，但即使在加载页面后，它仍会继续旋转

loader.service.ts custom.component.ts 我正在显示一些dc图表，我希望在显示图表后微调器停止

我需要使用

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;
    });
  }
}

默认情况下将显示微调器。
然后你可以这样设置

自定义.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

如果您理解正确，dc.renderAll（）是一个异步函数，因此您需要重新构造应用程序，以便在函数实际结束处理后隐藏微调器

实现这一点的一种方法是将renderAll（）转换为可观察对象并订阅它，在订阅中调用loaderService.display（false）

dc.renderAll().subscribe(
  value => this.loaderService.display(false)
)

你能详细说明一下吗？我不太明白你说的话。替换
showLoader:boolean带有
showLoader:boolean=true和
此.loaderService.display的位置（false）完全在custom.component.ts中。默认情况下，它是打开的，并且在加载您想要显示的内容时隐藏是否在custom.component.ts中？我发现错误，无法读取未定义的属性“subscribe”。您应该重构renderAll函数，使其返回一个可观察的值。
@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

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;
    });
  }
}

  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

dc.renderAll().subscribe(
  value => this.loaderService.display(false)
)