Не получается открыть компонетну в той же компоненте. Circular dependency detected

У меня есть таблица справочника (например bank):

export class BanksComponent extends TableDirective {

  constructor(
    authenticationService: AuthenticationService,
    toptabService: TopTabService,
    protected bankService: BankService,
    cudService: CUDService,
    componentFactoryResolver: ComponentFactoryResolver
  ) {
    super(authenticationService, toptabService, bankService, cudService, componentFactoryResolver);
    this.currentUser = this.authenticationService.currentUserValue;
    this.title = 'Банки';
    this.url = '/banks';
  }
}

Этот класс определяет настройки для отображения таблицы-справочника

@Directive()
export abstract class TableDirective extends TopTabPageComponent implements OnInit, AfterViewInit {
    protected constructor(
    authenticationService: AuthenticationService,
    toptabService: TopTabService,
    protected service: ITableService,
    private cudService: CUDService,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {
    super(authenticationService, toptabService);
  }
  
  /**
   * Диалоговое окно (контейнер)
   */
  @ViewChild('dialog', {read: ViewContainerRef}) dialogContainer: ViewContainerRef;
  
  ngOnInit(): void;
  ngAfterViewInit(): void;
  
  create(): void;
  update(): void;
  
  initializeTable(): void;
  
   /** Вызывает модальное окно для создания новго объекта */
  create(): void {
    this.dialogContainer.clear();
    const type = this.cudService.getCreateTypeModal(this.service.getController());
    const createDialogComponent = this.componentFactoryResolver.resolveComponentFactory(type);
    const createDialogComponentRef = this.dialogContainer.createComponent(createDialogComponent);
    (createDialogComponentRef.instance).service = this.service;
    (createDialogComponentRef.instance).containerRef = this.dialogContainer;
  }

  /** Вызывает модальное окно для редактирования объекта */
  update(): void {
    this.dialogContainer.clear();
    const type = this.cudService.getUpdateTypeModal(this.service.getController());
    const createDialogComponent = this.componentFactoryResolver.resolveComponentFactory(type);
    const createDialogComponentRef = this.dialogContainer.createComponent(createDialogComponent);
    (createDialogComponentRef.instance).service = this.service;
    (createDialogComponentRef.instance).containerRef = this.dialogContainer;
  }
  ...и другие..
}

Обращается внимание на CUDService. В нем определяется, что появится в модалке (закоментированный пример для модалки Создания нового элемента в справочнике банки)

export class CUDService {

  table: TableElement[] = [
    // new TableElement('bank', CreateDefaultContainerComponent, eMode.CREATE),
  ] ;

  constructor(){}

  getCreateTypeModal(routeName: string): Type<any> {
    return  this.table?.filter(f => f.name === routeName && f.mode === eMode.CREATE)[0]?.type ?? CreateDefaultContainerComponent;
  }

  getUpdateTypeModal(routeName: string): Type<any> {
    return  this.table?.filter(f => f.name === routeName && f.mode === eMode.UPDATE)[0]?.type ?? UpdateDefaultContainerComponent;
  }

  getDeleteTypeModal(routeName: string): Type<any> {
    return  this.table?.filter(f => f.name === routeName && f.mode === eMode.DELETE)[0]?.type ?? DeleteDefaultContainerComponent;
  }
}

И теперь если в модалке (добавления к примеру) появляется тип, который нужно подтянуть с другого справолчника (т е это объект другого справочника) я хочу открыть (поверх в еще одной модалке связанную таблицу, и выбрать это элемент) после чего затянуть его идентификатор.

@Component({
  selector: 'app-create-default-container',
  templateUrl: './create-default-container.component.html',
  styleUrls: ['./create-default-container.component.scss'],
})
export class CreateDefaultContainerComponent implements OnInit {
  @ViewChild('bottomSidebarDialog', {read: ViewContainerRef}) bottomSidebarDialog: ViewContainerRef;
  sidebarDisplay = false;
  
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
  
  getTypeByBackType(type: string): Type<any> {
    // TODO: fake data for test
    return BanksComponent;
  }
  
  displayLinkedData(type: string): void{

    this.bottomSidebarDialog.clear();
    const curType = this.getTypeByBackType(type);
    const tableComponent = this.componentFactoryResolver.resolveComponentFactory(curType);
    const tableComponentRef = this.bottomSidebarDialog.createComponent(tableComponent);
    (tableComponentRef.instance).isChildren = true;

    this.sidebarDisplay = true;
  }
}

После того, как в методе getTypeByBackType() появляются все типы таблиц, которые были изначально, появляется ошибка Circular dependency detected. Из-за чего эта ошибка я понимаю. Как избежать не могу понять. Как вообще можно открыть в компоненте ту же самую компоненту???


Ответы (0 шт):