Question

我正在尝试创建通用服务。我找到了这篇文章：https://medium.com/@krishna.acondy/a-generic-http-service-approach-for-angular-applications-a7bd8ff6a068，我曾用它来创建我的 DataService ，它看起来像这样：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { environment } from '../../../environments/environment';
import { Resource } from '../models/resource';
import { Serializer } from '../interfaces/serializer';

const API_URL = environment.apiUrl;

@Injectable()
export class DataService<T extends Resource> {

  constructor(
    private httpClient: HttpClient,
    private endpoint: string,
    private serializer: Serializer) {}

  public create(item: T): Observable<T> {
    return this.httpClient
      .post<T>(`${API_URL}/${this.endpoint}`, this.serializer.toJson(item))
      .map(data => this.serializer.fromJson(data) as T);
  }

  public update(item: T): Observable<T> {
    return this.httpClient
      .put<T>(`${API_URL}/${this.endpoint}/${item.id}`,
        this.serializer.toJson(item))
      .map(data => this.serializer.fromJson(data) as T);
  }

  read(id: number): Observable<T> {
    return this.httpClient
      .get(`${API_URL}/${this.endpoint}/${id}`)
      .map((data: any) => this.serializer.fromJson(data) as T);
  }

  list(): Observable<T[]> {
    return this.httpClient
      .get(`${API_URL}/${this.endpoint}`)
      .map((data: any) => this.convertData(data.items));
  }

  delete(id: number) {
    return this.httpClient
      .delete(`${API_URL}/${this.endpoint}/${id}`);
  }

  private convertData(data: any): T[] {
    return data.map(item => this.serializer.fromJson(item));
  }
}

我的序列化器如下：

import { Resource } from "../models/resource";

export interface Serializer {
    fromJson(json: any): Resource;
    toJson(resource: Resource): any;
}

我的资源如下所示：

export class Resource {
    id: number
}

如果我尝试运行我的项目，则会显示一条错误消息：

未捕获的错误：无法解析DataService的所有参数：（[对象对象]，[对象对象]，？）。

序列化器似乎有问题，但我不明白为什么。我已注释掉 spec 文件，因此该文件未在其中使用，并且当前 DataService 尚未扩展，因此我不确定为什么会抱怨。有人知道为什么吗？

建议是创建一个扩展 DataService 的新服务（我已经尝试过了，但是在发布此问题之前，我删除了它以查看是否引起了问题。现在，我重新创建了它，但仍然遇到相同的错误。

这是我的新班级：

import { Injectable } from '@angular/core';
import { DataService } from './data.service';
import { HttpClient } from '@angular/common/http';

import { CategorySerializer } from '../models/category-serializer';
import { Category } from '../models/category';

@Injectable()
export class CategoryService extends DataService<Category> {

  constructor(httpClient: HttpClient) {
    super(
      httpClient,
      'categories',
      new CategorySerializer()
    );
  }

}

和类别如下：

import { Resource } from "./resource";

export class Category extends Resource {
    name: string
}

和最导入的 CategorySerializer 看起来像这样：

import { Serializer } from "../interfaces/serializer";
import { Category } from "./category";

export class CategorySerializer implements Serializer {
    fromJson(json: any): Category {
      const model = new Category();
      model.id = json.id;
      model.name = json.name;  
      return model;
    }

    toJson(model: Category): any {
      return {
        id: model.id,
        name: model.name
      };
    }
}

但是我仍然有同样的错误：（

Answer 1

Angular无法解决序列化器的原因是因为没有实现序列化器对象。

串行器已被定义为一个接口，可以将其视为抽象类（不能直接调用，而是充当类遵循的“模板”）。为了在类中使用序列化器，您需要实例化它以使其成为可以与之交互的真实对象。为此，您需要创建一个扩展序列化程序接口的类，然后对其进行调用。

在您发布的示例中，该方法可以通用运行，这使正在发生的事情变得有些清晰，但是本质上您需要实现一个具体的类（它们使用PizzaSerializer）

当实例化服务本身时，它们会通过新实例化的Serializer版本（带有 new 关键字），构造方法将其用作一种Serializer。

请确保您有一个扩展您的Serializer类并传递给Service构造函数的序列化器。

无法解析DataService Angular的所有参数

1 个答案: