是否可以在 Angular2(Typescript) 中创建解析器类来处理响应？

Question

我知道我可以在 Angular 2(Typescript) 中制作组件和服务，并且可以解析组件中的响应，但我希望我的架构如下所示，因为响应中的任何更改我只需要更改我的解析器：

Service : 执行 API 调用并获取响应。有一个 get 响应方法。

Parser : 获取响应并解析响应并以可用的形式返回响应给组件。

组件：从解析器获取响应并显示数据以供查看。

为此，我使用服务中的可观察对象并在解析器中订阅它。然后使用解析器中的 observable 并在组件中订阅它。

但是这样做时会出现很多错误。我是否遗漏了任何步骤，或者这是解决问题的正确方法。

添加代码：

组件:::

    import { AuthenticateParser } from './../../parsers/authenticate.parser';
    import { Component, OnInit } from '@angular/core';
    @Component({
     selector: 'my-component',
     moduleId: module.id,
     templateUrl: './app.component.html',
     providers : [AuthenticateParser]
    })
    export class AppComponent implements OnInit {
     // Constructor Function
     constructor(private _authenticationService: AuthenticateParser) {
     }
     ngOnInit(): void {
      this._authenticationService.setAuthenticationToken();
     }
    }

服务 :::

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

解析器 :::

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

Answer 1

听起来您想将解析器作为服务。如果您提供示例代码会有所帮助。

在您的解析器中，您可以订阅 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 以获取解析后的输出