如何使用依赖注入扩展组件？

Question

我有以下类 ModuleWithHttp：

@Injectable()
export default class {
  constructor(private fetchApi: FetchApi) {}
}

我想按如下方式使用它：

@Component({
  selector: 'main',
  providers: [FetchApi]
})
export default class extends ModuleWithHttp {
  onInit() {
    this.fetchApi.call();
  }
}

因此，通过扩展已经注入依赖项的超类，我希望在其子类中访问它。

我尝试了许多不同的方法，甚至将超类作为组件：

@Component({
  providers: [FetchApi]
})
export default class {
  constructor(private fetchApi: FetchApi) {}
}

但是，＜code＞仍然是这样。fetchApi为null，即使在超类中也是如此。

Answer 1

也许响应晚了，但是我已经解决了只在BaseComponent和所有子类中注入注入器的问题，这样我就不需要维护服务定位器了。

我的基础类 ：

constructor(private injectorObj: Injector) {

  this.store = <Store<AppState>>this.injectorObj.get(Store);
  this.apiService = this.injectorObj.get(JsonApiService);
  this.dialogService = this.injectorObj.get(DialogService);
  this.viewContainerRef = this.injectorObj.get(ViewContainerRef);
  this.router = this.injectorObj.get(Router);
  this.translate = this.injectorObj.get(TranslateService);
  this.globalConstantsService = this.injectorObj.get(GlobalConstantsService);
  this.dialog = this.injectorObj.get(MatDialog);
  this.activatedRoute = this.injectorObj.get(ActivatedRoute);
}

我的孩子班级:

constructor( private injector: Injector) {

   super(injector);

}

Answer 2

您必须在超类中注入fetchAPI并将其传递给子类

export default class extends ModuleWithHttp {

  constructor(fetchApi: FetchApi) {
     super(fetchApi);
  }   

  onInit() {
    this.fetchApi.call();
  }
}

这是DI一般工作方式的一个特点。超类将通过继承实例化子类，但是您必须向子类提供所需的参数。

Answer 3

如果您想避免这种“样板”代码在子类中注入服务只是为了注入父类的构造函数，然后通过继承在子类中有效地使用该服务，您可以这样做：

编辑：从Angular 5.0.0 ReflecteInjector已被弃用，取而代之的是StticInjector，下面是更新的代码以反映此更改

拥有deps的服务地图，

export const services: {[key: string]: {provide: any, deps: any[], useClass?: any}} = {
  'FetchApi': {
    provide: FetchApi,
    deps: []
  }
}

具有注射器支架，

js prettyprint-override">import {Injector} from "@angular/core";

export class ServiceLocator {
  static injector: Injector;
}

在AppMoules中设置它，

@NgModule(...)
export class AppModule {
  constructor() {
    ServiceLocator.injector = Injector.create(
      Object.keys(services).map(key => ({
        provide: services[key].provide,
        useClass: services[key].provide,
        deps: services[key].deps
      }))
    );
  }
}

使用父类中的注入器，

export class ParentClass {

  protected fetchApi: FetchApi;

  constructor() {
    this.fetchApi = ServiceLocator.injector.get(FetchApi);
    ....
  }
}

并扩展父类，这样就不需要注入< code>FetchApi服务。

export class ChildClass extends ParentClass {
  constructor() {
    super();
    ...
  }

  onInit() {
    this.fetchApi.call();
  }
}