Question

我有一个组件可以访问api url，获取响应数据并将其显示在html中。

在发送请求之前，我需要显示一个微调器，在我收到响应并从中提取数据后，我应该隐藏它。

代码如下：

ngOnInit(): void {
        getData();      
}

getData(){

    self.loadingProvider.showLoading();//show spinner

   //code to fetch data from the server

    self.loadingProvider.hideLoading();
}

loadingProvider是对singleton类实例的引用。一切都在起作用，除了我没有看到旋转器。

现在，当我这样做时，效果非常好：

hidden

有人可以解释为什么它不能在ngOnInit中工作但在函数内部工作吗？

Answer 1

Javascript是一种异步语言，这意味着您的操作顺序并不重要，它不会等待前一个操作完成下一个操作。

在您的情况下，它显示微调器，启动请求并立即隐藏它。解决方案是返回Observable（或来自它的promise），然后在你的Promise的.then（）方法中隐藏微调器。

将.toPromise()添加到Observable的末尾并将其返回，并在ngInit中执行以下操作：

self.loadingProvider.showLoading().then(() =>
    self.loadingProvider.hideLoading();
);

单一类方法调用Angular 2 onInit vs方法

1 个答案: