角动态分量循环依赖

Question

我正在研究动态组件应用程序Here是plunker中的示例。 https://embed.plnkr.co/gGMSeQ/一切正常，但我有循环依赖。

我有两种类型的组件：LeafComponent和ContainerComponent。

这是我的依赖图

AppComponent <-- DynamicComponent <-- LeafComponent

AppComponent <-- DynamicComponent <-- ContainerComponent <-- DynamicComponent <-- LeafComponent

AppComponent <-- DynamicComponent <-- ContainerComponent <-- DynamicComponent <-- ContainerComponent

<--表示取决于。

我想要实现的目标

我需要在我的根目录或容器中动态创建叶子组件（也是动态创建的）。

有了这个要求，当我用aot 构建时，我显然会得到循环依赖。

这是因为entryComponents定义

// dynamic-component.ts
@Component({
  selector: 'dynamic-component',
  // Reference to the components must be here 
  // in order to dynamically create them
  entryComponents: [LeafComponent, ContainerComponent], 
  template: `
    <div #dynamicComponentContainer></div>
  `,
})

以及我的ContainerComponent需要一个锚点组件，我们在其中附加了动态子级。

// container-component.ts
@Component({
  selector: 'container',
  template: `
    <div style="border: 1px solid green;">
    <dynamic-component [componentData]="componentData"></dynamic-component>
    <div>{{name}}</div>
    <div>
  `,
 }) 

我的调查

循环依赖只是一个警告，是的！但它可能导致未定义的行为。这就是我试图看看是否有办法克服这一点的原因。

角度团队将循环依赖作为警告，这可能意味着在某些情况下它可以正常。

我无法找到将我的依赖关系置于更高级别的方法，因为这只会将依赖性问题推向链中。

真正的问题是

如何在需要时解决循环依赖？

Answer 1

Official documentation：

  

您可以通过在 NgModule 中引导来指定条目组件，   或将其包含在路由定义中。

在您的情况下，您在@Component装饰器

中指定了条目组件

更新了您的code example

@NgModule({
  imports: [ BrowserModule ],
  entryComponents: [ LeafComponent, ContainerComponent], // Reference to the components must be here in order to dynamically create them
  declarations: [ App, LeafComponent, ContainerComponent, DynamicComponent],
  bootstrap: [ App ]
})
export class AppModule {}