Angular Can';t解析数据服务的所有参数

Angular Can';t解析数据服务的所有参数,angular,Angular,我正在尝试创建一个通用服务。我找到了这篇文章:我用它创建了我的数据服务,它看起来像这样: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import { environment } from '..

我正在尝试创建一个通用服务。我找到了这篇文章:我用它创建了我的数据服务,它看起来像这样:

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
}
import { Resource } from "./resource";

export class Category extends Resource {
    name: string
}
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
      };
    }
}
我的资源如下所示:

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
}
import { Resource } from "./resource";

export class Category extends Resource {
    name: string
}
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
      };
    }
}
如果我尝试运行我的项目,我会收到一个错误,说明:

未捕获错误:无法解析数据服务的所有参数:([对象对象],[对象对象],?)

看起来它的序列化程序有问题,但我不明白为什么。 我已经注释掉了spec文件,因此它没有在那里使用,而且目前数据服务还没有扩展,所以我不确定它为什么会抱怨。 有人知道为什么吗


建议是创建一个新的服务来扩展数据服务(我已经尝试过了,但是在我发布这个问题之前,我删除了它,看看它是否导致了问题)。 现在我已经重新创建了它,但仍然会遇到相同的错误

这是我的新课:

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 { 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
}
import { Resource } from "./resource";

export class Category extends Resource {
    name: string
}
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
      };
    }
}

但是我仍然有相同的错误:(

Angular在解析序列化程序时遇到问题的原因是没有序列化程序对象的实现

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

在您发布的示例中,这是一个通用的工作方式,它使正在发生的事情变得更加清晰,但实际上您需要一个具体的类来实现(它们使用PizzaSerializer)

当他们实例化服务本身时,他们通过一个新实例化的序列化程序版本(带有new关键字),构造函数将其用作序列化程序的一种类型


确保您有一个扩展序列化程序类并传递给服务构造函数的序列化程序。

专用序列化程序:序列化程序
DI如何知道要使用哪种序列化?这就是
的意思。
是否将其添加到提供程序中list@Antoniossss序列化程序是一个接口,所以只要我有一个c实现接口的类,它是否应该工作?例如,它只是接口-您是否指定了此接口实现应使用的内容?(例如通过
提供
模块配置)Angular不是弹簧…;)您的意思是,如果我创建了一个扩展DataService的实际类,那么如果我有一个实现Serializer接口的序列化程序,错误就会消失?正确。如果您的CategorySerializer已添加到模块“provider”列表中,CategoryService应处理该新类的注入及其所有必需的依赖项密度。它被添加到模块列表中了吗?没有,我没有意识到它必须添加到模块列表中:)