角度为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构造函数中的Inject装饰器来解决，因为服务没有其他依赖来解决它应该保存不要使它们注入，只是将它们添加到模块的providers数组中应该足够我所理解的

...
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: (?).

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

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

Answer 1

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

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