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

Question

我正在制作一个有3个组件的angular library。

• FrameComponent (非公开)
• 应用组件
• 科目组件

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() 对于 SectionComponent

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

    }
}