Question

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

Answer 1

更改_loader在您要显示或隐藏加载程序的地方显示true false

在html文件中

let indexPath = IndexPath(row: 0, section: 0)
yourTableView.scrollToRow(at: indexPath, at: .bottom, animated: animated)

在组件文件中

<div class="loading" *ngIf="_loaderShow">Loading</div>

CSS

_loaderShow = true;

Answer 2

这是一种简单易用的解决方案。从这里下载字体真棒CSS图标包：

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

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

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

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

spinner.component.ts：

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

export class spinnerComponent 
{
    @Input () spinnerSize; 
}

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>

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

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

如何创建角度微调器

2 个答案: