如何显示装载机3秒并隐藏在角度2中 [英] How to show a loader for 3 sec and hide in angular 2

问题描述

我希望装载机显示5秒钟，并在我单击按钮时隐藏， 到目前为止，我尝试过

I want a loader show for 5 sec and hide when i click on a button, so far i tried

<div *ngIf='showloader'  class="form-group loaderformgroup maindivdisplaynone" id="waitresponce" >
    <div class="waitresponce">
         <img src="assets/img/loader.gif" img-from="assets" alt="loader" class="waitresponceloader"/>
    </div>
</div>


 resetform() {
        this.student = {};
          Observable.timer(500).subscribe(() => {
                        $('#tablebody').addClass('fadding');
                        this.showloader = true;
                        Observable.timer(500).subscribe(() =>  
                        $('#tablebody').removeClass('fadding'); 
                        this.showloader = false 
                        );   
                        });
    }

我的ts，

       setInterval(() => {  
  this.showloader = true;
}, 2000);

但是它显示的是2000年以后的装载机.有人可以帮忙.谢谢.

But it is showing loader after 2000.Can someone please help.Thanks.

推荐答案

不建议在Angular 2中使用setTimeout.您可以为其使用Observable和timer:

Using setTimeout is not advisable with angular 2. you can use Observable and timer for it :

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/timer';

@Component({
  selector   : 'my-component'
})
export class MyComponent implements OnInit, OnDestroy {
  public showloader: boolean = false;      
  private subscription: Subscription;
  private timer: Observable<any>;

  public ngOnInit() {
    // call this setTimer method when you want to set timer
    this.setTimer();
  }
  public ngOnDestroy() {
    if ( this.subscription && this.subscription instanceof Subscription) {
      this.subscription.unsubscribe();
    }
  }

  public setTimer(){

    // set showloader to true to show loading div on view
    this.showloader   = true;

    this.timer        = Observable.timer(5000); // 5000 millisecond means 5 seconds
    this.subscription = this.timer.subscribe(() => {
        // set showloader to false to hide loading div from view after 5 seconds
        this.showloader = false;
    });
  }

}

这篇关于如何显示装载机3秒并隐藏在角度2中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！