Angular 如何解决 "Circular dep for" 错误

Question

我正在制作一个包含 3 个组件的 angular 库：

框架组件（不是public）
应用组件
部分组件

ApplicationComponent 扩展了 FrameComponent。

SectionComponent 也应该扩展 FrameComponent 但 ApplicationComponent 包含 x 个 sectionComponent。

所以如果 SectionComponent 扩展了 FrameComponent，我会得到这个错误：

ERROR Error: "Circular dep for SectionComponent"
    Angular 10
    SectionComponent_Factory section.component.ts:14
    Angular 5
    AppComponent_Template app.component.html:2
    Angular 20
    Angular 17

确切的原因，是因为在 SectionComponent 中，我有一个 Provider 来获取父属性。

@Component({
  selector: 'ui-section',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.scss'],
  providers:  [ provideParent( SectionComponent ) ]
})

export class SectionComponent extends FrameComponent implements OnInit, AfterViewInit {
  ...
  constructor( elRef: ElementRef, @Optional() public parent: Parent){

  }

}

如果我评论/*@Optional() public parent: Parent*/错误就消失了

如何使 SectionComponent 扩展 FrameComponent 而不会出现循环 dep 错误？

Answer 1

解决方案是 @SkipSelf() for SectionComponent

export class SectionComponent extends FrameComponent implements OnInit, AfterViewInit {
    ...
    constructor( elRef: ElementRef, @SkipSelf() @Optional() public parent?: FrameComponent ) {

    }
}

Angular 如何解决 "Circular dep for" 错误

Angular how to resolve "Circular dep for" error

circular-dependency

angular9