Question

我目前正在使用具有仪表板和一些小部件的Web应用程序。我们使用ng-dynamic-component来显示我们的小部件。

在小部件（ComputeWidgetComponent）中，我有一个函数以全屏模式（FullscreenComponent）显示小部件，我目前正在做的是在FullscreenComponent中重新创建ComputeWidgetComponent（所有输入均通过Inputs传递），它运作良好，但我对循环依赖有警告：

ComputeWidgetComponent -> FullscreenComponent -> ComputeWidgetComponent

我的案件可能有解决方案吗？

是否可以将当前窗口小部件的实例传递给FullscreenComponent，后者将在不使用组件的情况下显示“相同”实例？

如果可能的话，这将是最适合我的解决方案，因为当前我正在重新创建小部件，因此他需要再次（通过后端）重新计算数据，如果我可以按原样传递组件，那将非常酷但以模式显示它。

编辑：

我仍在努力，这是我所做的：

在父级中，我以全屏方式打开模式，并传递我的小部件实例：

 dialogRefFullscreen: MatDialogRef<FullscreenComponent>;
 // The widgets components
  @ViewChildren(DynamicComponent) components: QueryList<DynamicComponent>;

  constructor(
    private workspaceService: WorkspaceService,
    private snackbarService: SnackbarService,
    private dialog: MatDialog,
  ) {}

...

this.dialogRefFullscreen = this.dialog.open(FullscreenComponent, {
  disableClose: true,
  autoFocus: false,
  maxWidth: "100vw",
  maxHeight: "100vh",
  height: "100%",
  width: "100%",
  data: {
    instance: this.components.first.componentRef.instance,
    componentType: WidgetComponent,
  }
});

然后在我的全屏组件中：

export class FullscreenComponent implements OnInit {

  @ViewChildren("component", { read: ViewContainerRef }) entryTables: QueryList<ViewContainerRef>;
  componentInstance: ComponentRef<any>;
  constructor(
    public dialogRef: MatDialogRef<FullscreenComponent>,
    @Inject(MAT_DIALOG_DATA) public dataDashboard: any,
    private resolver: ComponentFactoryResolver
  ) {
  }

  ngOnInit() {
    console.log(this.dataDashboard.instance);
  }

  ngAfterViewInit() {
    this.entryTables.toArray()[0].clear();
    this.componentInstance = this.entryTables.toArray()[0].createComponent(
      this.resolver.resolveComponentFactory(this.dataDashboard.componentType));
    this.componentInstance.instance.setWidgetConfiguration(this.dataDashboard.instance.widgetConfiguration);  

  }


  closeDialog() {
   this.dialogRef.close(this.componentInstance.instance);
  }
}

和html：

<div #component></div>

这几乎可以正常工作，我可以获取该组件并将其显示出来，问题是我必须使用从instance到componentInstance的setter来逐个传递所有数据，我没有找不到仅使用相同实例的解决方案

一个小问题是，当我以全屏模式打开小部件时，它会“重新创建”它，因此ngOnInit和构造函数将启动并再次触发我的计算：/

如何避免循环依赖（特殊情况）

0 个答案: