2017-02-06 5 views
1

Я знаю, что могу составлять компонент и службу в Angular 2 (Typcript) и анализировать ответ в компоненте, но я хочу, чтобы моя архитектура была как внизу, так как для любых изменений в ответе мне придется менять только мой парсер :Можно ли создать класс Parser в Angular2 (Typcript) для обработки ответа?

Сервис: Выполнение вызова вызова API и выборки. Имеет метод получения ответа.

Parser: возвращает ответ и обрабатывает ответ и возвращает ответ в полезной форме компоненту.

Компонент: получает ответ от анализатора и отображает данные для просмотра.

Для этого я пользуюсь наблюдаемым из службы и подписываю его на парсер. А затем с помощью наблюдаемого от парсера и подписывающего его в компоненте.

Но при этом возникает много ошибок при этом. Могу ли я пропустить какие-либо шаги или это правильный подход к проблеме.

Добавление Код:

Компонент :::

Услуги :::

import { Observable } from 'rxjs/Observable'; 
import { IRequest } from './api.interaction.interface'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import { Injectable } from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class ApiInteractionService { 
// Constructor Function 
constructor(private _http: Http) { 
} 
getApiResponse(p_attr: IRequest): Observable<Response> { 
    // Set request url 
    let _authenticationUrl: string = p_attr.url; 
    // Set request body 
    let _body: any = p_attr.body; 
    // Set content type to JSON 
    let _headers = new Headers(p_attr.header); 
    // Set a request option 
    let _options = new RequestOptions({ headers: _headers }); 

    return this._http[p_attr.method](_authenticationUrl, _body, _options) 
     .map((response: Response) => response.json()) ///... change response to JSON format 
     .do((data:any) => console.log('All : ' + JSON.stringify(data))) //... console response 
     .catch((error: any) => Observable.throw(error.json().error || 'Server error')); //...errors if any 
}} 

PARSER :::

import { Injectable, Component } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { IRequest } from './../services/api.interaction.interface'; 
import { ApiInteractionService } from './../services/api.interaction.service'; 

@Injectable() 
export class AuthenticateParser { 
private _authenticationToken: string = ''; 
// Constructor Function 
constructor(private _authenticationService: ApiInteractionService) { 
} 
// Fetches Authentication Token 
setAuthenticationToken(): void { 
    let p_url: string = 'http://10.5.214.82:8443/auth/authenticate'; 
    let p_body: Object = { 
     "userId": "admin", 
     "password": "admin" 
    }; 
    let p_header: Object = { 
     "Content-Type": "application/json" 
    }; 
    let p_attrs: IRequest = { 
     'method': 'post', 
     'url': p_url, 
     'body': p_body, 
     'header': p_header 
    }; 
    this._authenticationService.getApiResponse(p_attrs) 
     .subscribe(
     response => this.parseSuccessResponse(response), 
     error => this.parseErrorResponse(error) 
     ); 
    } 
    // Parses Token response and sets it. 
    parseSuccessResponse(p_response: any): void { 
     this._authenticationToken = p_response.data; 
    } 
    // Parses Error response and sets it. 
    parseErrorResponse(p_error: any): void { 
     this._authenticationToken = p_error.data; 
    } 
    // returns authentication token 
    getAuthenticationToken():string { 
    return this._authenticationToken; 
    } 
} 

ответ

2

Похоже, вы хотите сделать синтаксический анализатор как услуга. Помогли бы, если бы вы дали пример кода.

В вашем синтаксическом анализе вы можете подписаться на ответ http.get, а затем разобрать ответ, а затем опубликовать результат по теме. Затем в вашем компоненте вы подписываетесь на тему из парсера.

Вашего анализатор будет что-то вроде:

import { Injectable, OnInit} from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
import {YourService} from '....'' 

@Injectable() 
export class ParseService implements OnInit { 
    public parseSubject: Subject<any> = new Subject <any>(); 
    constructor(private service: YourService) {} 
    ngOnInit(){ 
    this.service.yourGetFunction() 
     .map(res=> res.json()) 
     .subscribe(
      response => { 
       parse logic that stores result in parsedObj 
       parseSubject.next(parsedObj); 
      }, 
      error => { this.errorMessage = <any>error}); 
    } 
} 

Сейчас в компоненте, вы можете импортировать ParseService и подписаться на его parseSubject получить разобраный результат

+0

это дает мне не ошибку Нет поставщика для YourService! –

+0

Серьезно ?! YourService - это место, где вы импортируете свою услугу, где у вас возникли вызовы API. Это код руководства, то же самое относится к yourGetFunction(), вы заменяете его функцией get в вашей службе api – kwalski

+0

Добавленный код; если вы можете проверить –