NG0200：如何打破独立组件和非独立组件之间的循环依赖

Question

我正在开发的库中有两个角度组件（

LibAComponent

和

LibBComponent

）。

LibAComponent

在

MyLibModule

中声明，并且

LibBComponent

是一个独立组件。这两个组件是否有可能在其模板中互相使用？

为了让

LibAComponent

使用

LibBComponent

，我将

LibBComponent

导入到

MyLibModule

。
现在，如果我想在

LibAComponent

中使用

LibBComponent

，我必须将

MyLibModule

导入到

LibBComponent

，这要么会导致

TypeError: type is undefined

，要么，如果我使用

forwardRef

，则会导致

NG0200: Circular dependency in DI detected

错误。

该代码也可以在 stackblitz 上找到。

@Component({
  selector: 'lib-a',
  template: `a
    <ng-container *ngIf="renderChild"> 
      -> <lib-b></lib-b> 
    </ng-container>`,
})
export class LibAComponent {
  @Input()
  renderChild: boolean = false;
}

@Component({
  selector: 'lib-b',
  template: `b 
    <ng-container *ngIf="renderChild">
      ->  <lib-a></lib-a>
    </ng-container>`,
  standalone: true,
  imports: [CommonModule, forwardRef(() => MyLibraryModule)],
})
export class LibBComponent {
  @Input()
  renderChild: boolean = false;
}


@NgModule({
  imports: [CommonModule, LibBComponent],
  declarations: [LibAComponent],
  exports: [LibAComponent, LibBComponent],
})
export class MyLibraryModule {}

Answer 1

我也遇到同样的问题，请问你解决了吗？