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

我目前正在开发一个带有仪表板和一些小部件的Web应用程序。 我们用来显示我们的小部件

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

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,
  }
});

dialogref全屏：MatDialogRef；
//小部件组件
@ViewChildren（DynamicComponent）组件：QueryList；
建造师(
专用工作空间服务：工作空间服务，
私人snackbarService:snackbarService，
私人对话：MatDialog，
) {}
...
this.dialogRefFullscreen=this.dialog.open（全屏组件{
disableClose：对，
自动对焦：错误，
最大宽度：“100vw”，
最大高度：“100vh”，
高度：“100%”，
宽度：“100%”，
数据：{
实例：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);
  }
}

导出类FullscreenComponent实现OnInit{
@ViewChildren（“组件”{read:ViewContainerRef}）入口表：QueryList；
componentInstance:ComponentRef；
建造师(
公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据仪表板：任意，
专用解析程序：ComponentFactoryResolver
) {
}
恩戈尼尼特（）{
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>

它几乎可以工作了，我可以获取组件并显示它，问题是我必须使用setter将所有数据从

实例

一个接一个地传递到

组件实例

，我找不到一个解决方案，只是使用同一个实例

---

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

很抱歉，但我不明白这如何解决我的问题/如何将它应用到我的问题上。你解决了这个问题吗？我还在努力，我用一些代码编辑了我的文章，尝试将这两部分代码添加到问题中，使问题变得有点清楚。我不知道这个对话代表什么。