angular 5中的高阶服务

Question

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

那么一个服务示例如下所示：

import restCollectionServiceFactory, { RestCollectionServiceType, BaseModel } from '../utils/restCollectionServiceFactory';

export interface Team extends BaseModel {
  name: string;
}

export interface TeamsService extends RestCollectionServiceType<Team> {
}

export const TeamsService = restCollectionServiceFactory<Team>({
  baseUrl: '/api/teams',
  name: 'Team',
});

一开始我对DI有一点纠结，因为装饰器只能在类指令之前使用，所以我不能让我的任何服务(例如TeamsService)可注入，但解决方法是在RestCollectionServiceType构造函数中使用注入装饰器，因为服务没有其他依赖来解决它应该保存不使它们成为可注入的，只需将它们添加到模块的提供者数组中就足够了

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

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

问题是，这在ng服务中工作得很好，但是当我尝试构建时，我得到以下错误：ERROR in : Can't resolve all parameters for TeamsAdminPageComponent in .../src/app/pages/admin/teams/teamsAdmin.page.ts: (?).

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

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

这个问题怎么解决呢？提前谢谢。

Answer 1

您的TeamsService可能需要是一个类而不是一个接口，这样注入器就可以创建它的一个实例。您还需要使用@Injectable()注释服务，否则注入器将抛出：

@Injectable()
export class TeamsService extends RestCollectionServiceType<Team> {
}