如何在角度为4/6/7的所有HTTP请求中隐藏加载程序？

Question

我希望在任何http请求触发器上显示加载器，并在所有http请求完成时隐藏。

我是棱角分明的新手，我无法找到实现它的方法。

请帮我！

Answer 1

这取决于你想要做的“装载机”的类型。如果使用Observables实现HTTP请求，则可以在同一块中订阅等待结果 - 您可以打开模式窗口（加载指示）或更新进度条。之后，使用.then（）语句 - 关闭模态或将进度放到100％完成。

一切都取决于你和你的愿景。

Documentation: Angular Observables

与此同时，一些代码和进展已经存在许多类似的问题：

• Open a modal on page load Angular4
• Open bootstrap modal on page load angular 2
• Angular bootstrap modal open onload

Answer 2

好吧，为了实现这一点，你必须做一些事情：

1. 制作全局查询可注入服务，它将为您的HTTP请求提供服务。在那里添加计数器（每次请求都会增加，完成后会减少）

例如：

@Injectable()
export class MyHTTPService {
public query(params: AjaxQueryClass) {
        ++this.requests_counter;
        return this.http.post(this.serverURI, JSON.stringify(params), { withCredentials: true})
        .toPromise()
        .then(d => {
                --this.requests_counter;
                return d;
            })
            .catch(err => {
                console.log(err);
                return new EmptyObservable();
            });

好吧，你可以使用Observables，而不是Promises，但是这个想法应该是明确的 - 每个请求都会增加计数器，它会一直保留在屏幕上，直到最后一个请求结束。在每个组件中使用此服务，仅使用它进行服务器查询。

2. 使用精美的滚动动画制作透明叠加层，并将其放在AppComponent（主要组件）中，并在模板中使用：

<div id="overlay" *ngIf="counter == 0"></div>

3. 在AppComponanet代码中应该有这样的地方：

    public counter = 0;
    ngDoCheck() {
       this.counter = this.my_http_service.requests_counter;
    }
    constructor(private my_http_service: MyHTTPService) {}

如何为透明叠加层编写CSS，您可以在谷歌中找到。如何编写注射剂，你可以在Angular Hero Tutorial中找到。