绕开循环依赖

Question

如果组件使用服务，并且服务初始化组件，那么是否有更好的方法来绕过循环依赖关系？我在这里所做的是，由于组件是由服务初始化的，所以我将服务本身注入组件，而不使用角度依赖注入。

工作区服务

@Injectable()
export class WorkspaceService {
  name = "John";
  constructor(
    private cfr: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {
    this.appendWorkspaceToBody();
  }

  private appendWorkspaceToBody(): void {
    const workspaceRef = this.cfr
      .resolveComponentFactory(WorkspaceComponent)
      .create(this.injector);
    workspaceRef.instance.workspaceService = this;

    this.appRef.attachView(workspaceRef.hostView);

    const domElem: HTMLElement = (workspaceRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    document.body.appendChild(domElem);
  }
}

工作区组件

@Component({
  selector: "app-workspace",
  template: "{{workspaceService.name}}"
})
export class WorkspaceComponent implements OnInit {
  public workspaceService: WorkspaceService

  ngOnInit() {}
}

要检查问题代码，请转到stackblitz

Answer 1

我为这个问题找到的更好的解决方案是为组件初始化编写一个单独的服务，该服务是通过在APP_INITIALISER中提供的模块执行的。

模块

// @dynamic
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, WorkspaceComponent],
  bootstrap: [AppComponent],
  providers: [
    WorkspaceService,
    WorkspaceInitializeService,
    {
      provide: APP_INITIALIZER,
      useFactory: (service: WorkspaceInitializeService) => () =>
        service.appendWorkspaceToBody(),
      multi: true,
      deps: [WorkspaceInitializeService]
    }
  ]
})
export class AppModule {}

服务

@Injectable()
export class WorkspaceService {
  name = "John";
  constructor() {
  }
}

Init服务

@Injectable()
export class WorkspaceInitializeService {
  constructor(
    private cfr: ComponentFactoryResolver,
    private injector: Injector
  ) {}
  appendWorkspaceToBody(): void {
    const workspaceRef = this.cfr
      .resolveComponentFactory(WorkspaceComponent)
      .create(this.injector);

    this.injector.get(ApplicationRef).attachView(workspaceRef.hostView);

    const domElem: HTMLElement = (workspaceRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    document.body.appendChild(domElem);
  }
}

要检查解决方案代码，请转到stackblitz