Question

我正在创建一个选项以将自定义列添加到PrimeNg表。我之所以要创建它，是因为我提供了一个默认表，其中已经设置了许多配置选项。

我遇到的问题是我似乎无法多次重复ng-template组件。

我的版本

角形7.2.12
Primeng 7.1.0
@ angular /动画7.2.12

我想实现什么

我想创建一个包装器，以简化列的创建并消除在表主体中创建多个模板的需要。

我想简化的示例：

<table>
 <!-- Row 1 -->
 <ng-template #header><th>edit></th></ng-template>
 <ng-template #content><button>edit></button></ng-template>

 <!-- Row 2 -->
 <ng-template #header><th>delete></th></ng-template>
 <ng-template #content><button>delete></button></ng-template>
</table>

我想简化为：

<table>
  <!-- Row 1 -->
  <custom-column>
    <th header>edit></th>
    <button>edit></button>
  </custom-column>

  <!-- Row 2 -->
  <custom-column>
    <th header>delete></th>
    <button>delete></button>
  </custom-column>
</table>

我在StackBlitz

中几乎已经完成了这项工作

问题

我现在面临的问题是，我需要为表中的每一行重复内容模板，以便为每一行提供一个编辑和一个删除按钮。但是，使用此设置后，按钮仅显示在最后一行（我认为这是因为ng-content仅能移动一次？）。

是否有可能实现我的目标，如果是，我应该如何更改代码？

Answer 1

由于ng-content组件不支持多次投影相同的内容（here和here），因此我需要切换到将模板注入表组件中。

受到Primeng解决此问题的方式的启发（通过创建保存模板的指令）：

@Directive({ selector: '[pTemplate]' })
export class PrimeTemplate {

  @Input() type: string;

  @Input('pTemplate') name: string;

  constructor(public template: TemplateRef<any>) { }

  getType(): string {
    return this.name;
  }
}

用法：<ng-template pTemplate="header"></ng-template

他们正在创建模板，并在表组件中获取对该模板的引用。模板可以无限次重复使用，从而解决了投影问题。

因为我想保持灵活性，但是想避免使用字符串比较（注意'name'属性），并且需要从querylist中提取正确的模板，所以我最终创建了2个指令，可以按以下方式使用（与我的第一次尝试示例相同，但实现更好）：

<ng-container>
  <ng-template appColHeader>Delete</ng-template>
  <ng-template appColContent><button>Not here!</button></ng-template>
</ng-container>

此代码的完整实现可在以下StackBlitz中找到。

以ng-content为主体重复ng-template（创建ng-content的副本）

1 个答案: