Question

我是angular 5的新手。我想在服务中创建一个模拟json数据，并且我想在单击按钮时创建一个Spinner loader。要在Angular 5中显示几秒钟的spinner。谢谢。

Answer 1

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

第一步：安装lib

npm install ngx-spinner --save

第二步：将lib导入模块（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);
  }
}

希望我能帮助您

Answer 2

您可以使用Angular Material Progress Bar。

如何在Angular 5中创建加载程序Spinner

2 个答案: