Angular 自定义loading组件

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