Question

每次应用处理某些DOM操作或服务查询时，我都想要一个通用的加载图像。做同样事情的最佳方法是什么？

1）创建组件是常见的方法。我想知道你可以添加一个微调器的所有方法。

我只是想知道有多种方法可以做到吗？

Answer 1

创建一个组件（加载器组件）并导入它和您需要的任何组件，您只需调用加载器组件函数（显示，隐藏）

Answer 2

您可以轻松创建一个加载器Component，并在某个布尔值

上调用它

这里的例子

HTML

<section class="InterimLoader" *ngIf="isLoading">
    <div class="loaderParent">
     //use a spinner icons or image
    </div>
</section>

CSS

section.InterimLoader{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: transparent;
}

section.InterimLoader div.loaderParent{
    text-align: center;
    position: fixed;
    left: 45%;
    top: 40%;
    width: 150px;
    height: 150px;
}

section.InterimLoader .fa{
    font-size: 7em !important;
    position: relative;
    top: 20%;
}

组件

import { Component, OnInit, Inject, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'loader',
    templateUrl: './loader.component.html'
})
export class ObsLoaderComponent implements OnInit {

    @Input() isLoading: boolean;

    constructor(){}

    ngOnInit() {}
}

您可以在任何需要加载程序的组件中调用它

<loader [isLoading]="isLoading"></loader>

如果您想要加载

，

isLoading定义了条件

在Angular 2/4/5应用程序中添加Loader / Spinner的最佳方法是什么？

2 个答案: