1.在shared目錄下新建loading資料夾

loading.component.html程式碼：

<div id="loading" class="loading" *ngIf="showLoading">
    <img src="/assets/img/loading.gif">
</div>

2.loading.component.ts程式碼

import { Component, OnInit } from '@angular/core';
import { LoadingService } from './loading.service';

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.css']
})
export class  LoadingComponent implements OnInit {

  public showLoading: boolean = false;//是否顯示loading
  constructor(private loadingService: LoadingService) {}

  ngOnInit() {
    this.loadingService.getLoding().subscribe(loading => {
        this.showLoading = loading;
    });
  }
}
 

3.loading.service.ts程式碼

import { Injectable } from "@angular/core";
import { Observable, Subject } from 'rxjs';

@Injectable()
export class LoadingService {

  private loadingSubject = new Subject<boolean>();

  constructor() {}

  getLoding(): Observable<boolean> {
    return this.loadingSubject.asObservable();
  }

  loading(showLoading: boolean) {
    this.loadingSubject.next(showLoading);
  }

}
 

4.loading元件就寫好了，下面是在別的元件中使用loading方法：

https://blog.csdn.net/qq_29483485/article/details/82150985