在angular中向登录页面添加加载消息

Question

我在尝试显示链接到服务器响应的加载消息时遇到了问题，我成功地为注销方法做了正确的操作，但我不知道如何为登录操作。这是我的帐户服务代码。

login(email: string, password: string) {
return this.http
.post<User>(
environment.apiUrl + '/auth/login',
{
email: email,
password: password
})
.pipe(map(user => {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('scrb-user', JSON.stringify(user));
this.userSubject.next(user);
return user;
}));
}
signup(user: User) {
return this.http
.post<User>(
environment.apiUrl + '/auth/signup',
user
);
}

logout() {
this.message
.loading('Action in progress', { nzDuration: 2000 })
.onClose!.pipe(
concatMap(() => this.message.success('Loading finished', { nzDuration: 2000 }).onClose!),
// concatMap(() => this.message.info('Loading finished is finished', { nzDuration: 2000 }).onClose!)
)
.subscribe(() => {
localStorage.removeItem('scrb-user');
this.userSubject.next(null);
this.router.navigate(['/account/login']);
console.log('All completed!');
});
}
}

Answer 1

您可以使用一个变量。示例：

login.component.html

//...Your form
<button type="submit" class="btn btn-primary shadow-none" #button>
<span *ngIf="!this.isLoading">Login</span>
//Bootstrap Spinner
<div class="spinner-border spinner-border-sm text-light" role="status" *ngIf="this.isLoading">
</div>
</button>

登录组件.ts

sendLogin(form: NgForm) {
this.isLoading = true;
this.loginService
//Your Login Method (I saved it in other file)
.postLogin(form.value.username, form.value.password)
.subscribe(
(data) => {
this.isLoading = false;
this.router.navigateByUrl('index');
},
(err) => {
this.isLoading = false;
alert(err);
})
form.reset();
}
);

}