时间戳

首页 > 解决方案 > 以 ng-content 作为正文重复 ng-template（创建 ng-content 的副本）

angular - 以 ng-content 作为正文重复 ng-template（创建 ng-content 的副本）

问题描述

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

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

我的版本

我想达到什么

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

示例我要简化的内容：

<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只有一次嵌入？）。

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

标签： angulartypescriptprimengtransclusion

解决方案

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

受到 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。

推荐阅读