Angular 4 - 將服務中的err對象捕獲到組件

Question

我正在使用角度爲前端和彈簧安全性作爲後端的登錄頁面，似乎一切正常，但是當我嘗試處理通過從服務捕獲到組件的錯誤不起作用。

service.ts

login(form) { 
     var objectToSend = 'j_username=' + form.j_username + '&j_password=' + form.j_password; 
     const headers = new Headers(
     { 
      'Content-Type': 'application/x-www-form-urlencoded', 
     } 
    ); 
     const options = new RequestOptions({headers: headers, withCredentials: true}); 
     return this.http.post('http://localhost:8080/***********/authenticate', objectToSend, options) 
     .map((res) => res) 
     .catch((error: any) => { 
      if (error.status === 401) { 
      console.log(error.status + ' is the current status'); 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 400) { 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 409) { 
      return Observable.throw(new Error(error.status)); 
      } else if (error.status === 406) { 
      return Observable.throw(new Error(error.status)); 
      } 
     }); 
    } 

login.component.ts

 loginProcess() { 
     this._authenticationService.login(this.form.value).subscribe(
     res => { 
      this.data = res; 
      if (res.status === 200) { 
      this._authenticationService.getRoles().subscribe(
       resp => { 
       if (resp.status === 200) { 
        this.roles = JSON.parse(resp.text()); 
        this.role = this.roles[0].authority; 
        localStorage.setItem('role', this.role); 
        this.connectedUser.eusLogin = this.form.value.j_username; 
        this.saveConnectedUser(this.connectedUser); 
        this.updateSessionTimeOut(); 
        if (this.role === 'ROLE_ADMIN') { 
        this._router.navigate(['home']); 
        } 
       } else { 
        this.showErrorMsgDetail = true; 
        this.error = true; 
       } 
       }, 
       error => { 
       this.error = true; 
       } 
      ); 
      } else { 
      } 
     }, 
     err => { 
      if (err.status === 401) { 
      this.showErrorMsgDetail = true; 
      this.errorMsgDetail = 'Bad credentials, try again'; 
      } 
     } 
    ); 
    } 

的問題是在捕捉從服務到該組件的響應代碼，在組件級別ERR .status未定義。

希望你們能弄清楚這一點。

Answer 1

您試圖在沒有任何Event Emitter或BehaviorSubject的情況下進行通信，您希望如何在其他位置捕獲錯誤？

您必須在服務中發現錯誤，將其注入到構造函數中的登錄組件中，然後您只需使用this.myService.getDataFromWebService（post）從組件中調用您的服務。

getDataFromWebService(postData: Kpi): EventEmitter<Kpi> { 
    const event: EventEmitter<Kpi> = new EventEmitter(); 
    this.sendPost(myService.API_PATH, postData).subscribe((data) => { 
     try { 
     if (this.checkError(data)) { 
      const parseData: Kpi = Kpi.parse(data); 
      event.emit(parseData); 
     } else { 
      event.emit(new Kpi()); 
     } 
     } catch (ex) { 
     this.env.error("Unknown error", "Invalid data received"); 
     console.log("Exception", ex); 
     kpiEvent.emit(new Kpi()); 
     } 
    }); 
    return event; 
    }