Javascript 在angular 5中单击时创建按钮微调器

我试图在单击按钮时创建一个微调器，但它似乎没有运行，这就是我在component.html中所做的

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" style="background: #FF473A;">
  Sign In
  <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
</button>

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" (click)="login()" style="background: #FF473A;">
      Sign In
      <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
    </button>

好的，我的发球

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Router } from '@angular/router';
import { Globals } from '../shared/api';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';

@可注射（） 导出类用户服务{

private loginUrl = this.globals.LOGIN_URL;
private loggedIn = false;
public loading: boolean = false;


constructor(private http: Http, private router: Router, private globals: Globals) { }

login(email: string, password: string) {
    let headers = new Headers();
    this.loading = true;
    headers.append('Content-Type', 'application/json');
    return this.http.post(this.loginUrl, JSON.stringify({ email, password }), { headers })
        .subscribe(res => {
            let data = res.json();

            if (data.token) {
                this.loading = false;
                window.location.href = '/';
            }
            else {
                this.loading = false;
                this.router.navigateByUrl('/login');
            }

        }, error => {
            this.loading = false;
        })
};

这就是我希望在点击时实现的目标

---

首先在component.html中

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" style="background: #FF473A;">
  Sign In
  <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
</button>

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" (click)="login()" style="background: #FF473A;">
      Sign In
      <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
    </button>

在您的service.ts文件中，如：

login(email: string, password: string) {
    return this.http.post(this.loginUrl, JSON.stringify({
       email, password
    }));
};

---

希望这将对您有所帮助！

HttpModule

已被弃用。您必须使用新的

HttpClientModule

whcih默认将响应格式化为JSON，因此我们不再需要使用

response.JSON（）

解析它：

修改后的服务代码：从您的服务返回

可观察的
，并在组件中订阅

    import { Injectable } from '@angular/core';
    import { HttpHeaders,HttpClient } from '@angular/common/http';
    import { Router } from '@angular/router';
    import { Globals } from '../shared/api';

    import { Observable } from 'rxjs/Observable';
    private loginUrl = this.globals.LOGIN_URL;
    private loggedIn = false;
    public loading: boolean = false;


    constructor(private http: HttpClient, private globals: Globals) { }

    login(email: string, password: string):Observable<any> {
       const headers = new HttpHeaders({'Content-Type':'application/json;})

    return this.http.post(this.loginUrl, JSON.stringify({ email, password }), { headers });
}

修订的HTML

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" (click)="login()" style="background: #FF473A;">
      Sign In
      <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
    </button>


登录
ng如果由于任何原因对我无效。另一种解决方案是：

使用按钮微调器而不是旋转按钮的输入
按id标记旋转按钮

在控制器的回调中，使用广播和按钮的id
$scope.$broadcast（'btnSpinnerSuccess'，'btn1'）；
第3步是在服务中使用您的代码单击btn1时调用的方法。ts仍然无法按预期登录（email:string，password:string）{this.loading=true；返回this.http.post（this.loginUrl，JSON.stringify（{email，password}））。订阅（res=>{this.loading=false；window.location.href='/'；}其他{this.loading=false；this.router.navigateByUrl（'/login'）；}}，错误=>{this.loading=false；}}@Sanoj_Vsorry由于格式错误，无法确定如何在评论中设置格式在您的服务中使用。ts
login（email:string，password:string）{返回this.http.post（this.loginUrl，JSON.stringify（{email，password}））；}；
only.error:property“subscribe”在类型“void”上不存在。订阅部分出现错误。您应该知道我使用的是旧Http而不是HttpClient。您认为这很重要吗？在服务中使用observable.ts=>login函数
login（电子邮件：字符串，密码：字符串）：observable{返回this.Http.post（this.loginUrl，JSON.stringify（{email，password}））；}
可观察到需要在服务中导入。ts@Vikas感谢您的否决，让我更新问题以显示所有我拥有的感谢转换到HttpClientModule完成了此操作，但现在我必须更改它，用于我使用HttpModule的所有其他地方…很好很高兴我能提供帮助我们可以有一个私人的吗？我需要帮助的更改导致了错误吗p on…谢谢兄弟…我不知道如何开始聊天，如果可以的话，我会很感激。你可以用你得到的新错误更新你的问题。我会把它变成一个新问题，因为它们真的不相关，我会为你通过这里的问题链接…好吗？
<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" (click)="login()" style="background: #FF473A;">
      Sign In
      <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
    </button>