Question

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

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

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

拆分窗格，容器和分隔符都是自定义angular2组件。拆分窗格模板只是

<ng-content></ng-content>

我使用@ContentChildren(ContainerComponent)和@ContentChildren(SeparatorComponent)

访问拆分窗格中的容器和 separtor

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

我希望找到所需HTML的解决方案：

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

将自动添加分隔符组件。但是我不知道如何用Angular来做这件事。 Transclusion 似乎是一种解决这个问题的方法，但我无法绕过它。

有什么想法吗？

由于

Answer 1

如果我们需要动态加载某些内容，那么首先我们需要对动态组件进行角度编译，如下所示：

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

所以我们想要的模板如下所示：

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

为了在container元素之间添加内容，我们应为每个ViewContainerRef获取container。我会在SplitPaneComponent内以下列方式进行此操作

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

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

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

Answer 2

这与您所需的语法不符，但使用ngFor可能会缩短代码。

将ngFor与last结合使用：

<template ngFor let-item [ngForOf]="items" let-i="index" let-last="last">
  <container>{{item.content}}</container>
  <separator *ngIf="!last"></separator>
</template>

在组件类中定义items，以便它可以获取数据。

Angular - 一个接一个地添加组件（在代码中）

2 个答案: