Angular 自定义loading组件

最新推荐文章于 2024-08-19 10:31:20 发布

S筱潇S四维Smile

最新推荐文章于 2024-08-19 10:31:20 发布

阅读量3.8k

点赞数 3

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_29483485/article/details/82151308

版权

本文介绍了如何在Angular应用中创建一个自定义的loading组件。首先，在shared目录下创建loading组件，包括loading.component.html和loading.component.ts代码。接着，详细说明了loading.service.ts的服务实现。在其他组件中，可以通过引入和调用服务方法来显示和隐藏loading。示例展示了在接口请求期间使用loading组件的方式。

摘要由CSDN通过智能技术生成

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.