Angular 2 - 转换响应为 Angular 模型的良好实践

25 浏览
0 Comments

Angular 2 - 转换响应为 Angular 模型的良好实践

在Angular 2中，将响应（例如json数据）转换为模型的良好做法是什么？换句话说，如何在Angular 2中实现自动映射功能。

team.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Team } from './team.model';
@Injectable()
export class TeamService {
  constructor(private _http: Http) {}
  public GetAllTeams(): Promise {
    return this._http.get('/app/teams/shared/team.data.json')
      .toPromise()
      .then(response => response.json().data as Team[])
      .catch(this.handleError);
  }
  private handleError(error: any): Promise {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

team.data.json

{

"data": [

{"id": "1", "name": "团队1", "otherProperty" : "S1"},

{"id": "2", "name": "团队2", "otherProperty" : "S2"}

]

}

team.model.ts

export class Team {
  private _id: string;
  public get id(): string {
    return this._id;
  }
  public set id(value: string) {
    this._id = value;
  }
  private _name: string;
  public get name(): string {
    return this._name;
  }
  public set name(value: string) {
    this._name = value;
  }
  private _icon: string;
  public get icon(): string {
    return this._icon;
  }
  public set icon(value: string) {
    this._icon = value;
  }
}

`GetAllTeams`方法应返回`Team`对象数组。我知道我可以创建一个工厂，接收json数据并返回`Team`对象数组，但在阅读了这篇文章（https://angular.io/docs/ts/latest/guide/dependency-injection.html）后，我认为这是个不好的模式。谢谢。

0

1 答案

0 Comments

在将响应转换为Angular模型时，出现了以下问题：不需要创建一个作为模型的类，如果你所需的是强类型，可以使用接口代替。使用接口的好处是你可以获得强类型，而接口不会生成额外的代码，而类会生成额外的代码。目前你所做的响应转换的方式我认为是不错的。

解决方法是：使用接口替代类来定义模型，这样可以获得强类型，不会生成额外的代码。

以下是解决方法的示例代码：

export interface Team {
    id: string;
    name: string;
    icon: stirng;
    someOtherProperty: [];
}
public GetAllTeams(): Promise {
    return this._http.get('/app/teams/shared/team.data.json')
                .toPromise()
                .then(response => response.json())
                .then(x => x.data);
}

需要记住的是，TypeScript是JavaScript + 强类型，不要试图将所有面向对象的实现带入其中（尽管有时候很诱人）。

感谢使用接口而不是类在我的情况下似乎是合适的。

0