При использовании forwardRef: WARNING в циклической зависимости обнаружено

Question

У меня есть следующий компонент Accordion:

export class AccordionComponent {

  @ContentChildren(PanelComponent) panels: QueryList<PanelComponent>;

  open(panel: PanelComponent) {
    this.panels.toArray().forEach(panel => panel.active = false);
    panel.active = true;
  }  

  close(panel: PanelComponent) {
    panel.active = false;
  }    

}

Где PanelComponent:

export class PanelComponent {

  @Input() active: boolean;
  @Input() title: string;

  accordion: AccordionComponent;

  constructor(@Inject(forwardRef(() => AccordionComponent)) accordion: AccordionComponent) { 
    this.accordion = accordion; 
  }

  toggle() {
    if (this.active)
      this.accordion.close(this);
    else
      this.accordion.open(this);
  }

}

Я внедряю AccordionComponent в PanelComponent, поэтому при открытии одной панели я могу закрыть вседругие ...

При компиляции я получаю предупреждение:

WARNING in Circular dependency detected:
accordion.component.ts -> panel.component.ts -> accordion.component.ts

Я понимаю предупреждение, но как его избежать?

Не случится ли это во многих случаяхгде используется forwardRef?

Answer 1

Я бы предложил вместо этого работать с Output s, так как это тип использования, для которого они предназначены.Примерно так:

export class PanelComponent {

  @Input() active: boolean;
  @Input() title: string;
  @Input() close = new EventEmitter();
  @Input() open = new EventEmitter();

  constructor() {}

  toggle() {
    if (this.active)
      this.close.emit(this);
    else
      this.open.emit(this);
  }

}

Тогда просто слушайте события на вашем PanelComponent:

<panel (close)="foo($event)" (open)="bar($event)"></panel>