如何创建角度微调器 [英] How to create a spinner in angular

问题描述

我有一个要求，如何使用角度5的Spinner Service(服装服务)文件创建一个Spinner通用组件.一旦我单击按钮并下拉菜单，Spinner应该在Angle 5中显示几秒钟，以及如何订阅方法(集成)，请分享您的建议(我们无需使用任何角度插件).请逐步说明谢谢建议

I have a requirement How to create a spinner common component with a spinner service(costume service) file for angular 5. that once I click on button and drop down also , spinner should display for few seconds in angular 5 and how to subscribe a method(integrate) , Please share your suggestions(we no need to use any angular plugins) .Please explain step by step Thanks in advice

推荐答案

这是一种简单易用的解决方案.从此处下载字体真棒CSS图标包:

This is kind of an easy and ready made solution. Download font awesome CSS icon pack from here:

https://fontawesome.com/v4.7.0/get-started

然后将css文件夹中的"font-awesome.min.css"文件包含在"index.html"的head标签内:

Then include the 'font-awesome.min.css' file from the css folder within the head tags of your "index.html":

  <link rel="stylesheet" href="font-awesome.min.css"/>

创建一个微调器组件，可以在任何地方调整大小和重复使用:

Create a spinner component that you can resize and reuse everywhere:

spinner.component.ts:

spinner.component.ts:

import { Component, Input } from '@angular/core';
@Component
({
    selector    :  'spinner',
    templateUrl :  './spinner.component.html'
})

export class spinnerComponent 
{
    @Input () spinnerSize; 
} 

spinner.component.html:

spinner.component.html:

<div *ngIf = "spinnerSize == 1">
   <i class="fa fa-spinner fa-spin fa-1x"></i>
</div>

<div *ngIf = "spinnerSize == 2">
   <i class="fa fa-spinner fa-spin fa-2x"></i>
</div>

<div *ngIf = "spinnerSize == 3">
   <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

在您希望使用微调器的任何模板中，只需包含以下内容:

In any template where you would wish to use the spinner just include the following:

<spinner [spinnerSize] = 1 ></spinner>

这篇关于如何创建角度微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！