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

Question

我正在实现一个微调器，它最初运行良好，但即使在页面加载后它仍继续旋转。

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 并将其添加到提供程序数组

app.component.html

我正在检查 showLoader 的值以查看它是真还是假，因为 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;
    });
  }
}

custom.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

我正在显示一些 dc 图表，我希望微调器在图表显示后停止。

我需要用 this.loaderService.display(false); 停止微调器，但在 dc.renderAll() 之后立即使用它；将 showLoader 的值显示为 false，因此不会出现微调器。

如有任何帮助，我们将不胜感激。谢谢。

Answer 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

Answer 2

如果您的理解正确，dc.renderAll() 是一个异步函数，因此您需要重构您的应用，以便在函数之后隐藏微调器实际上已经结束处理。

一种方法是将 renderAll() 变成可观察对象并订阅它，在订阅中调用 loaderService.display(false)。

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

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

How to stop the spinner after the loading finishes in an angular app?

javascript

progress-bar

typescript

dc.js

angular

loader.service.ts

app.module.ts

app.component.html

app.component.ts

custom.component.ts