角2 - コンポーネント内のHTTP応答を処理する方法

Question

角度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'); 
    } 
} 

LOGINのCOMPONENT

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); 
    } 
}