Не получается открыть компонетну в той же компоненте. 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.
Из-за чего эта ошибка я понимаю. Как избежать не могу понять. Как вообще можно открыть в компоненте ту же самую компоненту???