Angular 服务通过相同的接口/抽象类调用服务 => 循环依赖

Question

我想调用一个调用服务的服务。两者都被注入并使用相同的接口/抽象类。

export abstract class Service {
  abstract getTitle(): string;
}

@Injectable({
  providedIn: "root"
})
export class BService extends Service {
  getTitle() {
    return "from B";
  }
}

@Injectable({
  providedIn: "root"
})
export class AService extends Service {
  constructor(private service: Service) {
    super()
  }
  getTitle() {
    return this.service.getTitle();
  }
}
@NgModule({
  providers: [{ provide: Service, useClass: BService }]
})
export class AModule {}

@NgModule({
  imports: [BrowserModule, FormsModule, AModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [{ provide: Service, useClass: AService }]
})
export class AppModule {}

export class HelloComponent {
  title: string;
  constructor(service: Service) {
    this.title = service.getTitle();
  }

我得到：

Provider parse errors:
Cannot instantiate cyclic dependency! Service ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

https://stackblitz.com/edit/angular-tqoena

不重复自己如何做到这一点？

Answer 1

将 AppModule.ts 更改为以下内容

@NgModule({
  imports: [BrowserModule, FormsModule, AModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [AService] // <-- Just provide the service
})
export class AppModule {}

AService也不需要扩展抽象服务

@Injectable({
  providedIn: "root"
})
export class AService {
  constructor(private service: Service) {
  }
  getTitle() {
    return this.service.getTitle();
  }
}

查看工作示例here

2020 年 10 月 21 日更新

我想调用一个调用服务的服务。两者都被注入并使用相同的接口/抽象类。

这意味着

ServiceA extends Service
ServiceB extends Service
ServiceB is being injected into ServiceA
ServiceA will be called from Component
(ServiceB will also be called from Component)

上面的场景实现here