首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Angular 5中创建加载器微调器

如何在Angular 5中创建加载器微调器
EN

Stack Overflow用户
提问于 2018-08-09 03:07:53
回答 2查看 5K关注 0票数 -2

我是angular 5的新手。我想在我的服务中创建一个mock json数据,并且我想在单击按钮时创建一个旋转器加载器,并在Angular 5中显示几秒钟的旋转器。谢谢。

EN

回答 2

Stack Overflow用户

发布于 2018-08-09 04:43:02

您可以在项目中使用ngx-spinner。它非常容易安装,并且您有许多选项的微调。

第一步:安装库

npm install ngx-spinner --save

第二步:导入模块中的库(app.module.ts)

// Import library module
import { NgxSpinnerModule } from 'ngx-spinner';

@NgModule({
  imports: [
    // ...
    NgxSpinnerModule
  ]
})
export class AppModule { }

第三步:在app.component.html中添加(或编辑)以下代码

<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="medium" color="#dd8f44" type="line-scale-pulse-out-rapid"></ngx-spinner>

第四步:在组件或服务中使用

import { NgxSpinnerService } from 'ngx-spinner'; <--

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

  constructor(
    private spinner: NgxSpinnerService <--
  ) { }

  ngOnInit() {
    this.spinner.show(); <---
    setTimeout(() => {
      this.getClients();
      this.spinner.hide(); <---
    }, 1000);
  }
}

我希望我能帮到你

票数 2
EN

Stack Overflow用户

发布于 2018-08-09 03:13:25

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51753993

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档