Angular 角5中的高阶服务

在angular 5应用程序的开发过程中，我意识到我在重复创建通过REST api访问模型的服务，因此我认为将它们抽象到以下工厂是有意义的：

import { Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { action, observable } from 'mobx-angular';
import { ObservableArray } from 'mobx/lib/types/observablearray';

interface Parameters {
  baseUrl: string;
  name: string;
}

export interface BaseModel {
  _id: string;
}

export interface RestCollectionServiceType<T> {
  items: ObservableArray<T>;
  get: () => Promise<void>;
  create: (T) => Promise<void>;
  remove: (T) => Promise<void>;
  update: (T) => Promise<void>;
}

export default <T extends BaseModel>({ baseUrl, name }: Parameters) => {
  class RestCollectionService {
    @observable
    items;

    constructor(@Inject(HttpClient) private http: HttpClient) {
      this.items = [];
    }

    @action
    async get() {
      const items = await this.http.get<T[]>(baseUrl)
        .toPromise();

      this.items.clear();
      this.items.push(...items);
    }

    // ...
    // Rest of the actions
    // ...
  }

  return RestCollectionService;
};

问题是，这在ng serve上运行正常，但当我尝试构建时，我得到以下错误：

中的错误：无法解析…/src/app/pages/admin/teams/teamsAdmin.page.ts中TeamsAdminPageComponent的所有参数：（？）。

teamsAdmin.pate.ts是唯一依赖于TeamsService的组件

import {Component, Inject, OnInit} from '@angular/core';

import { TeamsService } from '../../../services/teams.service';

@Component({
  selector: 'rm-admin-teams',
  templateUrl: './teamsAdmin.page.html',
})
export class TeamsAdminPageComponent implements OnInit {
  columns = ['name', 'countryCode'];

  create = (team) => this.teamsService.create(team);

  remove = (team) => this.teamsService.remove(team);

  update = (team) => this.teamsService.update(team);

  constructor(@Inject(TeamsService) private teamsService: TeamsService) { }

  ngOnInit(): void {
    this.teamsService.get();
  }
}

---

如何解决这个问题？提前感谢。

您的

团队服务

可能需要是一个类而不是一个接口，因此注入器可以创建它的实例。您还需要使用注释服务，否则喷油器将抛出：

@Injectable（）
导出类TeamsService扩展RestCollectionServiceType{
}

感谢您的回复@rinukkusu，最初我实现了您描述的方式，但感觉有点样板必须提供扩展类的构造函数，以便angular可以注入http依赖项。我觉得您应该更新您的响应，除非其他人提供不需要继承的解决方案，否则我将接受您的响应。您是否查看了

可注入

注释的链接文档？可悲的是，我认为没有办法解决这个问题（很抱歉耽搁了，我做了，但找不到解决办法。

...
import { TeamsService } from './services/teams.service';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    ...
    TeamsService,
    ...
  ],
  bootstrap: [
    AppComponent,
  ],
})
export class AppModule { }

import {Component, Inject, OnInit} from '@angular/core';

import { TeamsService } from '../../../services/teams.service';

@Component({
  selector: 'rm-admin-teams',
  templateUrl: './teamsAdmin.page.html',
})
export class TeamsAdminPageComponent implements OnInit {
  columns = ['name', 'countryCode'];

  create = (team) => this.teamsService.create(team);

  remove = (team) => this.teamsService.remove(team);

  update = (team) => this.teamsService.update(team);

  constructor(@Inject(TeamsService) private teamsService: TeamsService) { }

  ngOnInit(): void {
    this.teamsService.get();
  }
}