typescript 如何显示加载器 3 秒并隐藏在角度 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40503667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show a loader for 3 sec and hide in angular 2
提问by MMR
I want a loader show for 5 sec and hide when i click on a button, so far i tried
我想要一个加载器显示 5 秒并在我点击按钮时隐藏，到目前为止我尝试过
<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
);
});
}
my ts,
我的 ts
setInterval(() => {
this.showloader = true;
}, 2000);
But it is showing loader after 2000.Can someone please help.Thanks.
但它显示 2000 年后的加载程序。有人可以帮忙。谢谢。
回答by ranakrunal9
Using setTimeoutis not advisable with angular 2. you can use Observableand timerfor it :
使用setTimeoutangular 2 是不可取的。你可以使用Observableand timerfor 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;
});
}
}
回答by user2427829
If you want to show the loader for 5 sec and hide it, you should set the condition in ng-if to false in setTimeout. Right now you are doing the other way i.e setting to true after 2 sec interval. Thats why it is showing after 2 sec.
如果你想显示加载器 5 秒并隐藏它，你应该在 setTimeout 中将 ng-if 中的条件设置为 false。现在你正在做另一种方式，即在 2 秒间隔后设置为 true。这就是为什么它在 2 秒后显示。
回答by vakho papidze
2000 is 2 sec. try 5000 and instead of setInterval use setTimeout, it will happen only once
2000 是 2 秒。尝试 5000，而不是 setInterval 使用 setTimeout，它只会发生一次
