我是角度和Web开发的新手,但能够设计各种网页,并使用HTTP客户端模块从服务器获取数据。
从服务器获取数据时我想显示进度微调器,但我无法做到。我搜索过谷歌,但没有任何东西让我这样做。请帮我实现这个目标。
码:
login.component.ts
userLogin() {
console.log('logging in');
this.eService.signIn(this.user_name, this.password)
.subscribe(
data => {
console.log(data);
this.admin = data;
if ( this.admin.firstLogin === true) {
// go to update admin password
} else {
this.router.navigate(['/dashboard']);
}
localStorage.setItem('isLoggedin', 'true');
}
);
}
的login.html
<div class="login-page" [@routerTransition]>
<div class="row justify-content-md-center">
<div class="col-md-4">
<img src="assets/images/logo.png" width="150px" class="user-avatar" />
<h1>Users/h1>
<form role="form">
<div class="form-content">
<div class="form-group">
<input type="text" name="username" [(ngModel)]="user_name" class="form-control input-underline input-lg" id="" placeholder="username">
</div>
<div class="form-group">
<input type="password" name="password" [(ngModel)]="password" (keyup.enter)="userLogin()" class="form-control input-underline input-lg" id="" placeholder="password">
</div>
</div>
<a class="btn rounded-btn" (click)="userLogin()"> Log in </a>
<a class="btn rounded-btn" >Clear</a>
</form>
</div>
</div>
</div>
所以,当我要求signIn服务时,我想展示微调器,请帮助我,我该怎么办呢?
我知道这对很多开发人员来说很简单,但对我来说这有点难度。
将微调器添加到HTML代码中,如下所示:
<img *ngIf="loading" src="assets/my-spinner.gif" /> <!-- Or use a CSS one if you like -->
然后,在您的Typescript中,您需要创建一个名为loading
的变量,并将其设置为:
userLogin() {
console.log('logging in');
this.loading = true; // Add this line
this.eService.signIn(this.user_name, this.password)
.subscribe(
data => {
console.log(data);
this.loading = false; // And this one
this.admin = data;
if ( this.admin.firstLogin === true) {
// go to update admin password
} else {
this.router.navigate(['/dashboard']);
}
localStorage.setItem('isLoggedin', 'true');
}
);
}
这将在服务运行时将loading
设置为true
你可以使用ng4-loading-spinner
执行npm i ng4-loading-spinner --save
将模块导入应用程序根模块
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
进行输入
imports: [ Ng4LoadingSpinnerModule.forRoot() ]
将微调器组件包含在根级别组件中。
<ng4-loading-spinner> </ng4-loading-spinner>
在show()
回调中使用hide()
和subscribe
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
constructor(
private spinnerService: Ng4LoadingSpinnerService
) { }
userLogin() {
this.spinnerService.show();
console.log('logging in');
this.eService.signIn(this.user_name, this.password)
.subscribe(
data => {
console.log(data);
this.admin = data;
if ( this.admin.firstLogin === true) {
// go to update admin password
} else {
this.router.navigate(['/dashboard']);
}
localStorage.setItem('isLoggedin', 'true');
},
()=>this.spinnerService.hide();
);
}