Angular - 一个接一个地添加组件(在代码中)

Question

我正在尝试使用 Angular 构建一个可调整大小的面板系统。 因此，您可以使用栏分隔多个容器，以允许用户调整它们的大小。

目前我有一个解决方案，要求开发人员编写以下 HTML 代码:

<split-pane>
    <container>Some content</container>
    <separator></separator>
    <container>Another content</container>
    <separator></separtor>
    <container>Content ?</container>
<split-pane>

split-pane、container 和separator 都是自定义的 angular2 组件。 拆分 Pane 模板只是

<ng-content></ng-content>

我使用 @ContentChildren(ContainerComponent) 和 在 split-pane 中访问 container 和 separtor>@ContentChildren(SeparatorComponent)

我在这个解决方案中遇到的问题是，开发人员需要在所有容器之间手动添加每个分隔符。

我想要一个解决方案，其中所需的 HTML 是:

<split-pane>
    <container>Some content</container>
    <container>Another content</container>
    <container>Content ?</container>
<split-pane>

分隔符 组件将自动添加。 但我不知道如何用 Angular 做到这一点。 嵌入 似乎是解决这个问题的一种方法，但我无法理解它。

有什么想法吗？

谢谢

Answer 1

如果我们需要动态加载某些东西，那么首先我们需要像这样对我们的动态组件使用 Angular 编译器:

  ...
  entryComponents: [SeparatorComponent]
})
export class AppModule {}

所以我们想要的模板是这样的:

 <split-pane>
   <container>Some content</container>
   <container>Another content</container>
   <container>Content ?</container>
 </split-pane>

为了在 container 元素之间添加一些东西，我们应该为每个 container 获取 ViewContainerRef。我会按照以下方式在 SplitPaneComponent 中执行此操作

@ContentChildren(ContainerComponent, { read: ViewContainerRef }) containersRefs: QueryList<ViewContainerRef>;

然后只需使用 ComponentFactoryResolver 获取组件工厂并在 ViewContainers 上方接收到 container 标签后添加 SeparatorComponent 。看起来应该是这样的:

ngAfterContentInit() {
  this.containersRefs.forEach((vcRef: ViewContainerRef, index: number, arr: any[]) => {
    if(index === arr.length - 1) {
        return;
    }

    let compFactory = this.resolver.resolveComponentFactory(SeparatorComponent);
    let compRef = vcRef.createComponent(compFactory);
    this.separators.push(compRef);
  })
}

Plunker Example