Angular 2 - 如何處理組件中的HTTP響應

Question

Angular 2的新功能，仍然試圖讓我的頭在某些事情。我卡住的地方是我有登錄服務和登錄組件。我從登錄組件向登錄服務發送登錄請求，以將用戶名和密碼發佈到登錄API。如果成功，它將令牌發佈到本地存儲。我卡住的地方是在令牌發送存儲之後，我想返回一個布爾響應回登錄組件。基於布爾響應，它將執行組件中的函數。

我可以做所有事情，直到我得到答覆。我不知道如何處理回到登錄組件的響應。感謝有人能指引我走向正確的方向。我的代碼如下：

登錄服務

import { Injectable } from '@angular/core'; 
import { Token } from './login'; 
import { APIDOMAIN } from '../../../shared/api'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 

@Injectable() 
export class LoginService { 
    url: string = APIDOMAIN; 
    constructor(private http: Http) { } 
    login(username: string, password: string) { 
    console.log('Login API'); 
    let headers = new Headers(); 
    let data = null; 
    headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
    headers.append("Content-Type", "application/x-www-form-urlencoded"); 
    this.http.post(this.url+ '/login', data, {headers: headers}) 
    .map(res => res.json()) 
    .subscribe(
     token => { console.log(token); localStorage.setItem('id_token',token.token); }, 
     err => { console.log(err);}, 
     () => console.log('Request Complete') 
    ); 
    } 
    logout(): void { 
    localStorage.removeItem('id_token'); 
    } 
} 

登錄組件

import { Component, OnInit } from '@angular/core'; 
import { LoginService } from './shared/login.service'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 
    username: string; 
    password: string; 
    constructor(private loginService: LoginService) { } 
    ngOnInit() {} 
    login(): void { 
    this.loginService.login(this.username,this.password) 
    // PEFORM SOME FUNCTION BASED BOOLEAN RESPONSE 
    } 
} 

Answer 1

這裏有一個解決方案：

export class LoginService { 
    status: EventEmitter<boolean> = new EventEmitter(); 

    login(username: string, password: string) { 
    this.http.post(...) 
    .map(res => res.json()) 
    .subscribe(token => { 
     console.log(token); 
     localStorage.setItem('id_token',token.token); 

     this.status.emit(true); 

     }); 

    logout() { 
    localStorage.removeItem('id_token'); 

    this.status.emit(false); 
    } 
} 


export class LoginComponent implements OnInit { 

    constructor(private loginService: LoginService) { } 

    ngOnInit() { 

    this.loginService.status.subscribe(console.info); 
    } 
}